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

时间:2014-10-01 23:09:40

标签: javascript html input

问题:尝试了两种不同的方法来使代码计算完成的字段数量;保持输出“0”或“5”,这显然表明它不起作用。

我实际上对JavaScript很陌生,所以我不知道是否有一些我很遗憾的东西。虽然我搜索并发现了一对相关的,但他们处理的是使用jQuery。

HTML PART:

        <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 PART:

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>

很抱歉这个格式化,我是在在线编辑器中进行的。

1 个答案:

答案 0 :(得分:2)

当您检查值是否等于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>