Question

对不起，如果这不是正确的做事方式，我是编码和堆栈溢出的新手。我有这个显示两位数的代码;现在它只是在问你什么颜色和你想要显示的数字。它使用了样式表，我还没有包含它。

我尝试做的是在开头有输入字段而不是提示字段。但是，使用单个外部Javascript文件对我来说似乎不太可能！正如您所看到的，在您输入一个值到输入字段之前加载了javascript，然后当您输入内容时页面就会刷新。

我是否需要使用单独的外部Javascript文件？这是常见做法吗？如果没有，如何在输入输入字段后输入函数getDigits？

<!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);

Answer 1

试试这个

Live Demo

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

您还想要更改

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

到

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

更新

Live Demo

window.onload=function() {
  document.getElementById('digits').onsubmit=function() {
    var digits = parseInt(this.digitsBox.value);
    getDigits(digits);
    return false; // cancel submit
  }
}

如何在Javascript中验证表单的输入值

1 个答案: