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

【问题标题】：Can somebody explains that why my input fields value is not changing有人可以解释为什么我的输入字段值没有改变
【发布时间】：2015-09-17 12:30:49
【问题描述】：

我正在用 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>

【问题讨论】：

您的脚本 (JS) 不包含在您的页面 (HTML) 中，CSS 也不包含
我正在使用 jsbin.com，所以我认为它会自动添加到页面，或者如果它没有，那么我该怎么做？

标签： javascript html css split words

【解决方案1】：

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

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

 };

JSFIDDLE

【讨论】：

谢谢，但这并没有在输入字段中添加字数。
太好了，我确实工作了，非常感谢您的帮助。请您帮忙扩展它，以便我不需要按钮来计算单词，而是随着输入的继续，输出字段中的单词数会不断更新？非常感谢
为什么不用innerHTML.value而只用.value，你能解释一下吗？
因为它的输入类型不是其他标签

【解决方案2】：

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

你也可以像这样设置输入：

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

【讨论】：

【解决方案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/

【讨论】：

谢谢，但对我来说看起来有点复杂，因为我只是一个初学者。再次感谢您的帮助