Buffy Anne-summers Buffy Anne-summers - 29 days ago 4
HTML Question

Javascript: Input bar isn't working or giving any result

I made a program that asks the user how many input bars he wants to display and then the user has to type in some values into the input bars and click verify but the issue i am having is that whenever i click on verify, nothing happens. I get the error:


Uncaught TypeError: Cannot read property 'value' of null


whenever i click on verify.

Here are my codes:



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




Answer

The script is failing when it reaches this portion:

 document.getElementById("userNumber"+i)

This indicates that there is no element called userNumber + i (i.e. "userNumber3") for you to then call the .value property of (Cannot read property 'value' of null) .

And that's because you have elements with ids of "username2, username3, username4, etc." and "userNumber", but not "userNumber" plus a number.

      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()">