【问题标题】:Button isn't working at all按钮根本不起作用
【发布时间】:2016-11-13 16:47:54
【问题描述】:

我正在制作一个包含数字数组的程序,然后用户输入一些值并单击验证。他输入的值必须与数字数组顺序一致,如果不是,用户会收到一条警告消息,抱歉。

第一个输入栏中的值决定了比较应该从数组的哪个编号开始。例如,如果数组包含像 {2,4,6,8,10} 这样的数字,并且用户在第一个输入栏中输入 6,然后在接下来的两个输入栏中输入 8 和 10,他应该得到结果“678 " 如果他没有正确输入第一个数字,假设他输入了 3,并且由于 3 不在数组中,那么无论他在其他输入栏中输入什么,他都会得到“对不起”的结果。

类似地,如果用户在第一个输入栏中输入 4,然后在第二个输入栏中输入 8,他仍然应该得到结果“Sorry”,因为数组的顺序是 {4,6,8} 而不是{4,8}。

我编写了一个程序,但每当我点击验证按钮时,什么都没有发生。

这是我的代码。这也是我得到的结果: https://jsfiddle.net/53j19rpt/

<html>

<head>
</head>
<script type="text/javascript">
    var arr = [];
    var t;
    var num = 2;
    var x = [];
    for (var x = 0; x < 4; x++) {
        document.getElementById("one" + x);
    }

    function go() {
        for (var t = 0; t < 4; k++) {
            x[t] = num * (t + 1);
        }
        for (var k = 0; k < 4; k++) {
            if (document.getElementById("one0").value >= x[k])
                if (document.getElementById("one" + k).value == x[k])
                    document.write(document.getElementById("one" + k).value);
                else
                    document.write("Sorry");
        }
    }
</script>

<body>
    <input id="one0" type="text">
    <input id="one1" type="text">
    <input id="one2" type="text">
    <input id="one3" type="text">
    <input type="button" id="verifyBtn" value="verify" onclick="go()">
</body>

</html>

【问题讨论】:

  • 您永远不能在页面加载后使用 document.write。并且您需要等待加载才能访问页面上的字段
  • for (var x = 0; x
  • 我实际上放弃了尝试解决这个问题。 document.getElementById("one" + x); 不完整,在它所在的地方不需要。请使用更好的变量名。 i 几乎在 for 循环中普遍使用,但是您有 t 和 k 并且没有一致地更新它们。在多个地方更新 k 并且 var 也被提升时,您可能会运行永久循环
  • 对不起..我本来打算做别的东西,但后来把它擦掉了,但我忘了擦掉那个没用的部分..好吧,我需要做的就是使用window.onload?就这样?
  • 在小提琴中,我点击了(Javascript)按钮并更改为“in head”,因此在使用之前定义了函数

标签: javascript jquery arrays html


【解决方案1】:

版本 1 - 所有 4 个必须按顺序正确

var x = [],num=2;
// I assume you will want to change this to random later
for (var i = 0; i < 4; i++) { 
  x[i] = num * (i + 1);
}
console.log(x);

function go() {
  var found=0;
  for (var i = 0; i < 4; i++) {
    if (document.getElementById("one" + i).value == x[i]) {
      found++;
    }
  }
  document.getElementById("result").innerHTML = found==x.length?x:"Sorry";
}
<input id="one0" type="text" value="" />
<input id="one1" type="text" value="" />
<input id="one2" type="text" value="" />
<input id="one3" type="text" value="" />
<input type="button" id="verifyBtn" value="verify" onclick="go()" />
<span id="result"></span>

如果输入错误,则版本 2 错误

var x = [],
  num = 2;
// I assume you will want to change this to random later
for (var i = 0; i < 4; i++) {
  x[i] = ""+num * (i + 1); // make string
}
console.log(x);
window.onload = function() {
  var field = document.querySelectorAll(".entry");
  for (var i = 0; i < field.length; i++) {
    field[i].onkeyup = function() { 
      document.getElementById("result").innerHTML = (x.indexOf(this.value) == -1)?"Sorry":this.value;
    }
  }
}

function go() {
  var field = document.querySelectorAll(".entry"),
    error = false,
    res = "";
  for (var i = 0; i < field.length; i++) {
    res += field[i].value; // string concatenation
  }
  document.getElementById("result").innerHTML = (res == x.join("")) ? res : "Sorry";
}
<input class="entry" id="one0" type="text" value="" />
<input class="entry" id="one1" type="text" value="" />
<input class="entry" id="one2" type="text" value="" />
<input class="entry" id="one3" type="text" value="" />
<input type="button" id="verifyBtn" value="verify" onclick="go()" /><br/>
<span id="result">test</span>

版本 3 - 如果它们是数组的子部分,则任何 1、2、3 或 4 个条目都被认为是正确的,例如46可以,68也可以,26不行

var x = [],
  num = 2;
// I assume you will want to change this to random later
for (var i = 0; i < 4; i++) {
  x[i] = ""+num * (i + 1); // make string
}
console.log(x);
window.onload = function() {
  var field = document.querySelectorAll(".entry");
  for (var i = 0; i < field.length; i++) {
    field[i].onkeyup = function() { 
      document.getElementById("result").innerHTML = (x.indexOf(this.value) == -1)?"Sorry":this.value;
    }
  }
}

function go() {
  var field = document.querySelectorAll(".entry"),
    error = false,
    res = [];
  for (var i = 0; i < field.length; i++) {
    if (x.indexOf(field[i].value) !=-1) res.push(field[i].value); 
  }
  document.getElementById("result").innerHTML = (x.join(".").indexOf(res.join("."))!=-1) ? res : "Sorry";
}
<input class="entry" id="one0" type="text" value="" />
<input class="entry" id="one1" type="text" value="" />
<input class="entry" id="one2" type="text" value="" />
<input class="entry" id="one3" type="text" value="" />
<input type="button" id="verifyBtn" value="verify" onclick="go()" /><br/>
<span id="result">test</span>

【讨论】:

  • 嗨,你的第三个版本快到了,非常感谢。唯一的问题是,当用户输入错误或乱序的数字,然后单击验证按钮时,结果应该只是说对不起,它错了,而不是显示数字。所以结果只能是对或错。但是非常感谢你理解我糟糕的解释和帮助!我真的很感激!
  • 我会在 12 小时左右重温这个
【解决方案2】:

如果我能很好地理解您的问题,这应该可以:

<html>
<head>
</head>
<body>
    <input id="one0" type="text" value="">
    <input id="one1" type="text" value="">
    <input id="one2" type="text" value="">
    <input id="one3" type="text" value="">
    <input type="button" id="verifyBtn" value="verify" onclick="go()">

    <script type="text/javascript">
        function go() {
            var arrinputs = [];
            var arr = [2, 4, 10, 12];

            for (var x = 0; x < 4; x++) {
                var tmp = parseInt(document.getElementById("one" + x).value)
                if (!isNaN(tmp))
                    arrinputs.push(tmp);
            }
            var a = "-" + arrinputs.join('-') + "-";
            var b = "-" + arr.join('-') + "-";

            if (b.indexOf(a) != -1) {
                alert("Ok!");
            } else {
                alert("Sorry!");
            }
        }
    </script>

</body>
</html>

测试 1(检查数组 2、4、6、8)

返回:正确

测试 2(检查数组 2、4、6、8)

返回:正确

测试 3(检查数组 2、4、6、8)

返回:对不起

测试 4(检查数组 2、4、10、12)

返回:正确

测试 5(检查数组 2、4、10、12)

返回:对不起

测试 6(检查数组 2、4、10、12)

返回:对不起

【讨论】:

  • 谢谢它的效果更好,但问题是,数组是 {2,4,6,8},所以即使用户在第一个栏中输入 4,然后在下一个栏中输入 6,8并点击验证,它应该说正确..
  • @BuffyAnne-summers 你的意思是如果第一个输入是“4”,第二个输入是“68”,它应该是正确的吗?或者你的意思是它可以在一个输入中输入逗号分隔的数字,例如第一个输入“4”和第二个输入“6,8”?
  • 是的,我的意思是如果第一个输入是 4,第二个是 6,第三个是 8,它应该是正确的
  • 基本上它必须是有序的,但用户可以决定从哪里开始,如果他从4开始,我们必须在第二条输入6,在第三条输入8
  • 留空一个栏
猜你喜欢
  • 1970-01-01
  • 2016-03-26
  • 1970-01-01
  • 2017-01-11
  • 2020-10-23
  • 2011-12-02
相关资源
最近更新 更多