Question

我正在一个小的字计数器上进行学校评估，看不到此代码有什么问题。想法是，当您单击“提交”按钮时，它会显示“字数：”以及放入文本框中的字符数。我已经向老师展示了我的代码，他同意他认为这没有问题。

Javascript：

window.onload = function(){
    var input = document.getElementById(userInput).value;
  if(submit.onclick) {
    document.getElementById("wordCount").innerHTML = "Word Count: " + input.length;
  };
};

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <script type='text/javascript' src='script.js'></script>
    </head>
      <body>
        <h1 style='font-family:verdana;text-decoration:underline;'>Word Counter</h1>
        <p>Please input text into the text box below:</p>
        <input type='text' id='userInput'/>
        <button id='submit'>Submit</button>
        <p id='wordCount'></p>
        <script type='text/javascript' src='script.js'></script>
    </body>
</html>

Answer 1

尝试在userInput内的getElementById周围加上引号。现在，您正在尝试通过ID为undefined的元素来获取元素，因为userInput变量不存在。

Answer 2

document.querySelector('#submit').addEventListener('click', function(e) {
	const input = document.querySelector('#userInput');
  const inputValue = input.value;
  const wordsArray = inputValue.split(' ');
  document.querySelector('#wordCount').innerText = `Word Count: ${wordsArray.length}`;
})

<h1 style='font-family:verdana;text-decoration:underline;'>Word Counter</h1>
<p>Please input text into the text box below:</p>
<input type='text' id='userInput'/>
<button id='submit'>Submit</button>
<p id='wordCount'></p>

首先，在窗口加载时，#userInput内部可能没有任何信息，这意味着 var input = document.getElementById(userInput).value;未定义或''。

第二，您的提交按钮没有绑定点击事件，因此 submit.onclick将返回false； Binding DOM events

最后，由于没有添加HTML，我从使用.innerHTML切换到.innerText。另外，您的原始代码没有得到字数统计，但是会返回输入文本的字符数。为了获得字数统计，我在空格上分割了输入文本，并返回该数组的长度作为字数统计。

使用innerHTML（）并将javascript变量值插入HTML的问题

2 个答案: