计算通过javascript完成的输入类型文本字段

counting input type text fields that are completed via javascript

本文关键字：输入 类型 文本 字段 javascript 计算      更新时间：2023-09-26

问题：尝试了两种不同的方法使代码计算完成的字段数量；不断输出"0"或"5"，这显然表明它不起作用

事实上，我对JavaScript还很陌生，所以我不知道我是否缺少了一些明显的东西。尽管我搜索并找到了一对有关联的夫妇，但他们使用jQuery进行处理。

HTML部分：

        <form id="form1">
            <input type="text" id="choice0" /><br />
            <input type="text" id="choice1" /><br />
            <input type="text" id="choice2" /><br />
            <input type="text" id="choice3" /><br />
            <input type="text" id="choice4" /><br />
        </form>
        <button onClick="choicesCompleted()">Update Wheel</button>
        <button type="reset" form="form1">Restart</button>
        <p>choices filled: <span id="showc"></span></p>

JS部分：

function choicesCompleted() {
var c = 0;
for (i = 0; i < 5; i++) {
    if (document.getElementById("choice" + i).value != null) {
        c = c + 1;
    }
}
document.getElementById("showc").innerHTML = c;
}

正如我之前提到的，其他解决方案都处理jQuery，尽管它可能不是典型的，但我只是试图通过使用JavaScript来完成这项工作。我正在努力进行更多的练习，并了解为什么它不起作用。

我试着走另一条路，把文本输入的一个简单值推到一个数组中，然后显示它，但这也会导致死胡同。下面是一个我试着运行的简单测试的例子，看看它是否有效。

<!DOCTYPE html>
<html>
<body>
<p>ANSWER: <span id="here"></span></p>
<input type="text" id="line0" />
<button onclick="pleaseWork();">Submit</button>
</body>
<script>
function pleaseWork() {
var array = [];
array.push(document.getelementbyid("line0").value);
document.getelementbyid("here").innerHTML = array[0];
}
</script>
</html>

很抱歉这篇文章的格式，我是在一个在线编辑器中做的。

当您应该检查值是否等于''（空输入的值）时，您正在检查null。

您的第二个示例不起作用，因为根据元素id获取元素的方法是getElementById，而您使用的是getelementbyid。

function choicesCompleted() {
  var c = 0;
  for (i = 0; i < 5; i++) {
    if (document.getElementById("choice" + i).value !== '') {
      c = c + 1;
    }
  }
  document.getElementById("showc").innerHTML = c;
}
<form id="form1">
  <input type="text" id="choice0" />
  <br />
  <input type="text" id="choice1" />
  <br />
  <input type="text" id="choice2" />
  <br />
  <input type="text" id="choice3" />
  <br />
  <input type="text" id="choice4" />
  <br />
</form>
<button onClick="choicesCompleted()">Update Wheel</button>
<button type="reset" form="form1">Restart</button>
<p>choices filled: <span id="showc"></span>
</p>

相关文章：