有人可以解释为什么我的输入字段值没有改变吗

Question

我正在 JavaScript 中制作一个简单的单词计数器程序。我是 JavaScript 世界的新手，所以如果我问的是一个基本且简单的问题，请原谅。我正在使来自 textarea 的文本字符串被拆分为单词数组的一切正常工作，我可以记录单词数以进行控制台但无法将它们显示到我希望它们出现的文本字段中。希望有人可以在这里提供帮助。谢谢

var btn = document.getElementById("btn");
var numWords = document.getElementById("output");
var str = document.getElementById("txtBox");
btn.onclick = function()
{
   var words = str.value.split(" ");
   numWords.innerHTML.value = words.length;
   console.log( words.length );
   
};

.container
{
  width: 600px;
  margin: 0 auto;
}

textarea
{
  width: 560px;
  padding: 10px;
  background-color: #dfdfdf;
  color: #333;
  font-size: 18px;
}

input 
{
  text-align: center;
  padding: 10px;
  margin-top: 15px;
}

input[type="submit"]
{
  float: right;
  margin-right: 15px;
  background-color: #84ac49;
  border: 0;
  color: #fff;
  font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
    <div class="container">
        <from>
            <textarea name="txtBox" id="txtBox" cols="30" rows="10"></textarea><br/>
            <input type="text" value = 0 id="output">
            <input type="submit" value="Count Words" id="btn">
        </from>
    </div>
</body>
</html>

Answer 1

在点击函数事件中移动获取值

btn.onclick = function()
{
    var str = document.getElementById("txtBox").value
    var words = str.split(" ");
    numWords.value = words.length;
    console.log( words.length );

 };

JSFIDDLE

Answer 2

btn.onclick = function () {
    var words = str.value.split(" ");
    numWords.value = words.length;
    console.log(words.length);
};

你也可以这样设置输入：

<input value="Count Words" id="btn">

Answer 3

当您点击计数按钮时，您将获得字数统计。

HTML

<textarea id="inputString" cols="50" rows="4"></textarea>
    <br>
    <input type="button" name="Convert" value="Count Words" onClick="countWords();"> 
    <input id="wordcount" type="text" value="0" size="6">

Javascript

 countWords=function(){
    s=document.getElementById("inputString").value;
    s = s.replace(/(^\s*)|(\s*$)/gi,"");
    s = s.replace(/[ ]{2,}/gi," ");
    s = s.replace(/\n /,"\n");
    document.getElementById("wordcount").value = s.split(' ').length;
}

这是一个演示：https://jsfiddle.net/DhwaniSanghvi/tdn3x72g/

有人可以解释为什么我的输入字段值没有改变吗

Can somebody explains that why my input fields value is not changing

html

javascript

css

split

words