Javascript: Input bar isn't working or giving any result
Question
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>
1 answers
solution1
1 ACCPTED 2016-11-10 14:51:53
The script is failing when it reaches this portion:
document.getElementById("userNumber"+i)
This indicates that there is no element called userNumber + i (ie "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()">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.