尝试更改 span 元素的 textContent [重复]答案

【问题标题】：Trying to change textContent of span element [duplicate]尝试更改 span 元素的 textContent [重复]
【发布时间】：2020-01-15 17:37:20
【问题描述】：

尝试计算文本字段中的字符数。以下代码不会更改跨度元素 textContent。如何将 textContent 更改为文本字段字符串长度？ CODEPEN

HTML

<label for="text">Enter your text below.</label>
<textarea id="text"></textarea>

<p>You've written <strong><span id="character-count">0</span> characters</strong>.</p>

document.addEventListener('keydown', function(event) {

  var elem = document.querySelector('#text');
  var text = elem.textContent;
  document.querySelector('#character-count').textContent = text.length;

});

【问题讨论】：

因为elem 指的是<textarea>，所以你需要var text = elem.value 来代替
keydown 如何为您提供正确的长度？

标签： javascript

【解决方案1】：

document.addEventListener('keyup', function(event) {
  var textArea = document.querySelector('#text');
  var count = document.querySelector('#character-count');

  var text = textArea.value;
  count.innerText = text.length;
});

【讨论】：

【解决方案2】：

将var text = elem.textContent; 更改为var text = elem.value;

【讨论】：

keydown 如何给出正确的长度？

【解决方案3】：

您的 javascript 将是这样的：

document.addEventListener('keydown', function(event) {

  var elem = document.getElementById('text');
  var text = elem.value;
  console.log(text);
  var count = document.querySelector('#character-count');
  count.textContent = text.length;
  console.log(text.length);

});

【讨论】：