How to validate a form's input value in Javascript

StackOverflow https://stackoverflow.com/questions/22482217

  •  16-06-2023
  •  | 
  •  

Question

Sorry if this isn't the proper way to do things, I'm new to coding and stack overflow. I have this code that displays two digits; for now it just asks you at the beginning what color and what digits you want displayed. It uses a stylesheet, which I haven't included.

What I'm trying to do is have an input field instead of a prompt in the beginning. However, this doesn't seem possible to me using a single external Javascript file! As you can see, the javascript is loaded before you can input a value into the input field, and then the page just refreshes when you do enter something in.

Do I need to use seperate external Javascript files? Is this common practice? If not, how do I get the function getDigits to run after typing into the 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 you 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) {

    for (i = 0; i < 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) {


    for (i = 0; i < 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];
        }
    }
}

// This function extracts digits from an input text and illuminates based on the digits
function getDigits(text) {
    text = text.toString();
    text = text.split("");
    console.log(text);
    var i = 0;
    for (i = 0; i <= text.length; i++) {
        text[i] = parseInt(text[i]);
        illuminate1(text[i]);
        i=i +1;
        console.log(i);
        break;
    }

    for (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);
Était-ce utile?

La solution

try this

Live Demo

window.onload=function() {
  document.getElementById('digits2').onkeyup=function() {
    var digits = parseInt(this.value);
    getDigits(digits);
  }
}

You also want to change

 var i=0;
 for (var i = 0; i < text.length; i++) {

to 

 for (var i = 0; i < text.length; i++) {

Update

Live Demo

window.onload=function() {
  document.getElementById('digits').onsubmit=function() {
    var digits = parseInt(this.digitsBox.value);
    getDigits(digits);
    return false; // cancel submit
  }
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top