Question

我正在努力制作一个“游戏”，出于某种原因，如果我尝试获取复选框的checked，我的脚本将会翻转...有时它会起作用，有时它会停止执行。我错过了某种错误吗？

<html>
<head>
<title>Untitled Document</title>
<script>
var check = "showcheck";
var number = 1234;
var lvl = 1;
var oldlvl = 1;
var multiplier = 10000;
var start = 1;

function exefunction() {
    document.getElementById("boxv").focus();
    if (check == "showcheck") {
        document.getElementById("message").innerHTML = "What was the number?";
        document.getElementById("num").style.display = "none";
        document.getElementById("box").style.display = "inline";
        document.getElementById("boxv").focus();
        check = "checknum";
    }
    else if (check == "checknum") {
        if (document.getElementById("boxv").value == number) {
            document.getElementById("message").innerHTML = "CORRECT!";
            document.getElementById("boxv").style.color = "#00DD00";
            document.getElementById("boxv").value = number;
            document.getElementById("level").innerHTML = "Level: " + lvl;
            lvl++;
        }
        else if (document.getElementById("boxv").value != number) {
            document.getElementById("message").innerHTML = "INCORRECT!";
            document.getElementById("boxv").style.color = "#DD0000";
            document.getElementById("boxv").value = number;
            document.getElementById("level").innerHTML = "Level: " + lvl;
            if (lvl>1) {lvl--;}
            loselife();
        }
        check = "showmem";
    }
    else if (check == "showmem") {
        if (lvl == oldlvl + 10) {
            oldlvl = lvl;
            multiplier = multiplier * 10;
            document.getElementById("boxv").maxLength = multiplier.toString().length - 1;
        }
        else if (lvl < oldlvl) {
            oldlvl = lvl - 10;
            multiplier = multiplier / 10;
            document.getElementById("boxv").maxLength = multiplier.toString().length - 1;
        }
        number = Math.floor(Math.random() * multiplier / 10 * 9) + multiplier / 10;
        document.getElementById("boxv").style.color = "#000000";
        document.getElementById("boxv").value = "";
        document.getElementById("message").innerHTML = "Memorize this number: ";
        document.getElementById("num").innerHTML = number;
        document.getElementById("num").style.display = "inline";
        document.getElementById("box").style.display = "none";
        check = "showcheck";
    }
}

function loselife(){
    var life = 4;
    var hearts = "&#9829; ";
    alert(document.getElementById("lifebox").checked);
}
function submitenter() {
    var keycode = window.event.keyCode;
    if (keycode == 13) {
        if (start === 0) {exefunction();}
        else {startfunc();}
    }
    if (keycode < 47 || keycode > 58) {
        return false;
    }
}

function startfunc() {
    document.getElementById("button").innerHTML = '<input name="" type="button" value="OK" onClick="exefunction()"/>';
    document.getElementById("level").innerHTML = "Level: " + lvl;
    document.getElementById("message").innerHTML = "Memorize this number: ";
    document.getElementById("num").style.display = "inline";
    document.getElementById("boxv").value = "";
    document.getElementById("box").style.display = "none";
    if (document.getElementById("lifecheck").checked === true) {
        document.getElementById("life").innerHTML = "&#9829; &#9829; &#9829; &#9829; &#9829; ";
    }
    else if (document.getElementById("lifecheck").checked === false) {
        document.getElementById("life").innerHTML = "";
    }
    if (document.getElementById("timercheck").checked === true) {
        document.getElementById("timer").innerHTML = "3:00";
    }
    else if (document.getElementById("timercheck").checked === false) {
        document.getElementById("timer").innerHTML = "";
    }
    start = 0;
}

function tests() {
    alert(lfckv);
}
</script>
<style type="text/css">
#level, #life, #timer{
    color: #666;
}
* {
    text-align: center;
}
#num {
    display: none;
}
#num {
    font-size: x-large;
}
#body {
    margin-top: 250px;
    margin-right: auto;
    margin-bottom: 100px;
    margin-left: auto;
}
body {
    background-color: #6FF;
}
</style></head>
<body onKeyPress="return submitenter()" >
<div id="body">
<span id="level"></span>
<table align="center">
  <tr>
    <td width="200" height="50" align="center" valign="middle"><span id="message">What level would you like to begin at?</span></td>
    <td width="200" height="50" align="center" valign="middle"><span id="num">1234</span><span id="box"><input type="text" id="boxv" maxlength="4" value="1"/></span></td>
  </tr>
</table>
<table align="center">
  <tr>
    <td width="200" id="life"><label><input id="lifecheck" type="checkbox" >Lives</label></td>
    <td id="button"><input type="button" value="OK" onClick="startfunc()"/></td>
    <td width="200" id="timer"><label><input id="timercheck" type="checkbox" >Timer</label></td>
  </tr>
</table>
<input name="" type="button" onClick="tests()" value="tests()">
</div>
</body>
</html>

Answer 1

lifebox未在loselife()函数中定义。另外，还要检查test()函数，alert()语句有一个未定义的变量。

如果您使用的是Google Chrome（或任何其他可以帮助您调试的浏览器），我建议您通过代码行进行调试。

Answer 2

我认为你最好使用简单的相等来检查你的复选框的状态，因为我的结果不是布尔值。

所以它会是这样的：

if (document.getElementById("lifecheck").checked == true) {

或只是

if (document.getElementById("lifecheck").checked) {

而不是

if (document.getElementById("lifecheck").checked === true) {

Answer 3

AHAH！我解决了这个问题。显然，当我将复选框的可见性设置为none时，由于某种原因，它还将checkvalue设置为null。我原本以为它会保留检查值，但由于某种原因它没有。

为什么我的脚本不能使用复选框？

3 个答案: