How to validate a form's input value in Javascript -
sorry if isn't proper way things, i'm new coding , stack overflow. have code displays 2 digits; asks @ beginning color , digits want displayed. uses stylesheet, haven't included.
what i'm trying have input field instead of prompt in beginning. however, doesn't seem possible me using single external javascript file! can see, javascript loaded before can input value input field, , page refreshes when enter in.
do need use seperate external javascript files? common practice? if not, how function getdigits run after typing input field?
<!doctype html> <html> <head> <meta charset="utf-8"> <title> digits</title> <link rel="stylesheet" type="text/cs" href="css.css"> </head> <body> <div id="light" class="lightred"></div> <div id="seg0" class="y"></div> <div id="segb0" class="y"></div> <div id="seg10" class="y"></div> <div id="seg1" class="y"></div> <div id="seg11" class="y"></div> <div id="seg2" class="y"></div> <div id="seg12" class="y"></div> <div id="seg3" class="y"></div> <div id="seg13" class="y"></div> <div id="seg4" class="y"></div> <div id="seg14" class="y"></div> <div id="seg5" class="y"></div> <div id="seg15" class="y"></div> <div id="seg6" class="y"></div> <div id="seg16" class="y"></div> <script type="text/javascript" src="javascript.js"></script> <form id="digits"> number: <input id="digits2" type="text" name="digitsbox" value="" /> </form> </body> </html> var y = 'y', n = 'n'; function changecolor(color) { switch(color){ case "red": y = "y"; document.getelementbyid("light").classname = "lightred"; break; case "green": y = "y1"; document.getelementbyid("light").classname = "lightgreen"; break; case "blue": y = "y2"; document.getelementbyid("light").classname = "lightblue"; break; } //return y; } //changecolor(prompt("do want red, green, or blue?")); var pattern = [[y, y, y, y, y, y, n], [n, y, y, n, n, n, n], [y, y, n, y, y, n, y],[y, y, y, y, n, n, y], [n, y, y, n, n, y, y], [y, n, y, y, n, y, y], [y, n, y, y, y, y, y], [y, y, y, n, n, n, n], [y, y, y, y, y, y, y], [y, y, y, n, n, y, y]]; function illuminate1(num) { (i = 0; < 11; i++) { if (num === i) { document.getelementbyid("seg0").classname = pattern[i][0]; document.getelementbyid("seg1").classname = pattern[i][1]; document.getelementbyid("seg2").classname = pattern[i][2]; document.getelementbyid("seg3").classname = pattern[i][3]; document.getelementbyid("seg4").classname = pattern[i][4]; document.getelementbyid("seg5").classname = pattern[i][5]; document.getelementbyid("seg6").classname = pattern[i][6]; } } } function illuminate2(num) { (i = 0; < 11; i++) { if (num === i) { document.getelementbyid("seg10").classname = pattern[i][0]; document.getelementbyid("seg11").classname = pattern[i][1]; document.getelementbyid("seg12").classname = pattern[i][2]; document.getelementbyid("seg13").classname = pattern[i][3]; document.getelementbyid("seg14").classname = pattern[i][4]; document.getelementbyid("seg15").classname = pattern[i][5]; document.getelementbyid("seg16").classname = pattern[i][6]; } } } // function extracts digits input text , illuminates based on digits function getdigits(text) { text = text.tostring(); text = text.split(""); console.log(text); var = 0; (i = 0; <= text.length; i++) { text[i] = parseint(text[i]); illuminate1(text[i]); i=i +1; console.log(i); break; } (i=i;i <= text.length; i++) { text[i] = parseint(text[i]); illuminate2(text[i]); i=i+1; console.log(i); break; } } //getdigits("35"); var digits = parseint(document.getelementbyid('digits2').value); getdigits(digits);
try this
window.onload=function() { document.getelementbyid('digits2').onkeyup=function() { var digits = parseint(this.value); getdigits(digits); } } you want change
var i=0; (var = 0; < text.length; i++) { to
(var = 0; < text.length; i++) { update
window.onload=function() { document.getelementbyid('digits').onsubmit=function() { var digits = parseint(this.digitsbox.value); getdigits(digits); return false; // cancel submit } }
Comments
Post a Comment