javascript oninput 只触发一次？

Question

我遇到了 JavaScript 函数仅触发一次的问题。

我一开始在函数中使用了更简洁的结构，但将其分解为离散的操作，看看我是否能弄清楚任何事情。行为完全相同。

在我的 HTML 中，在 HEAD 标记内，我有:

<SCRIPT>
function onCharInput()
{
var conpagechars = document.getElementById("pagecontentx").innerHTML;
var conpagecharcount = conpagechars.length.toString();
document.getElementById("pccount").innerHTML = conpagecharcount;
console.log('test',conpagecharcount);
}
</SCRIPT>

在打开的 CGI 文本区域输入元素中，我有这个:

id="pagecontentx" oninput="onCharInput()"

在页面的其他地方，我有这个:

<span id="pccount"></span>

当我在文本区域中输入内容时，跨度会更新为内容的正确大小 - 恰好一次。之后，它什么也不做。我可以添加字符、删除字符……什么都没有。添加控制台调用后，在 Firefox 控制台打开的情况下，我也只看到一次结果。据我所知，该函数在第一次之后就不会再被调用。

TIA

Answer 1

每次有输入事件时都会触发该函数，您每次只是读取相同的字符串。

innerHTML的<textarea>代表其默认值。

您需要阅读value属性以获取其当前值。

document.querySelector("textarea").addEventListener("input", log);

function log(event) {
  console.log("Log function is firing");
  console.log("Current value: " + this.value);
  console.log("Default value: " + this.innerHTML);
}

<textarea>This is the default value</textarea>