javascript - Javascript:输入栏不起作用或没有给出任何结果

我制作了一个程序，询问用户要显示多少个输入栏，然后用户必须在输入栏中键入一些值并单击“验证”，但是我遇到的问题是，每当我单击“验证”时，都不会发生任何事情。我得到错误：

未捕获的TypeError：无法读取null的属性“值”

每当我点击验证。

这是我的代码：

<html>
  <head>
    <script language="javascript">
      var x = [];
      var choose;
      var i;
      var xar=[];
      choose=parseFloat(prompt("how many inputs u want to display"));
      for(i=0;i<choose;i++)
        x[i]=document.getElementById("cont"+i).style.visibility="visible";

      function hola() {
        for(i=0;i<choose;i++)
          document.getElementById("cont"+i).style.visibility="visible";

      }


      function verify(){
        for(i=0;i<choose;i++){
          xar[i]=document.getElementById("userNumber"+i).value;
        }
        for(i=0;i<choose;i++)
          if(xar[i]==i)
            alert("good");
          else
            alert("wrong");
      }

    </script>
  </head>

  <body>
    <input type="button" onclick="hola()" value="hidefield0" id="boton0">

    <div id="cont0" style="visibility: hidden;">
      <input type="text" id="userNumber" class="something">
    </div>
    <input type="button" onclick="hola()" value="hidefield2" id="boton1">
    <div id="cont1" style="visibility: hidden;" class="something">
      <input type="text" id="username2">
    </div>

    <input type="button" onclick="hola()" value="hidefield1" id="boton2">

    <div id="cont2" style="visibility: hidden;" class="something">
      <input type="text" id="username3">
    </div>
    <input type="button" onclick="hola()" value="hidefield3" id="boton3">

    <div id="cont3" style="visibility: hidden;" class="something">
      <input type="text" id="username4">
    </div>
    <input type="button" onclick="hola()" value="hidefield4" id="boton4">

    <div id="cont4" style="visibility: hidden;" class="something">
      <input type="text" id="username5">
    </div>
    <input type="button" onclick="hola()" value="hidefield5" id="boton5">

    <div id="cont5" style="visibility: hidden;" class="something">
      <input type="text" id="username6">
    </div>
    <input type="button" id="verifyBtn" value="verify" onclick="verify()">
  </body>
  <html>

最佳答案

脚本到达此部分时失败：

 document.getElementById("userNumber"+i)

这表明没有名为userNumber + i的元素（即“ userNumber3”）供您调用.value属性（无法读取null的属性“值”）。

那是因为您具有ID为“ username2，username3，username4等”的元素。和“ userNumber”，而不是“ userNumber”加一个数字。

      var x = [];
      var choose;
      var i;
      var xar=[];
      choose=parseFloat(prompt("how many inputs u want to display"));
      for(i=0;i<choose;i++)
        x[i]=document.getElementById("cont"+i).style.visibility="visible";

      function hola() {
        for(i=0;i<choose;i++)
          document.getElementById("cont"+i).style.visibility="visible";

      }


      function verify(){
        for(i=0;i<choose;i++){
          xar[i]=document.getElementById("userNumber"+i).value;
        }
        for(i=0;i<choose;i++)
          if(xar[i]==i)
            alert("good");
          else
            alert("wrong");
      }

    <input type="button" onclick="hola()" value="hidefield0" id="boton0">

    <div id="cont0" style="visibility: hidden;">
      <input type="text" id="userNumber" class="something">
    </div>
    <input type="button" onclick="hola()" value="hidefield2" id="boton1">
    <div id="cont1" style="visibility: hidden;" class="something">
      <input type="text" id="userNumber2">
    </div>

    <input type="button" onclick="hola()" value="hidefield1" id="boton2">

    <div id="cont2" style="visibility: hidden;" class="something">
      <input type="text" id="userNumber3">
    </div>
    <input type="button" onclick="hola()" value="hidefield3" id="boton3">

    <div id="cont3" style="visibility: hidden;" class="something">
      <input type="text" id="userNumber4">
    </div>
    <input type="button" onclick="hola()" value="hidefield4" id="boton4">

    <div id="cont4" style="visibility: hidden;" class="something">
      <input type="text" id="userNumber5">
    </div>
    <input type="button" onclick="hola()" value="hidefield5" id="boton5">

    <div id="cont5" style="visibility: hidden;" class="something">
      <input type="text" id="userNumber6">
    </div>
    <input type="button" id="verifyBtn" value="verify" onclick="verify()">

关于javascript - Javascript:输入栏不起作用或没有给出任何结果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40530296/