爲什麼我的腳本不能使用複選框？

我想製作一個「遊戲」，出於某種原因，如果我嘗試獲取複選框的checked，我的腳本將會翻轉出來......有時會起作用，有時它會停止執行。我錯過了一些錯誤嗎？在loselife()函數定義爲什麼我的腳本不能使用複選框？

<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>

來源

2011-01-21 Sean

在JavaScript控制檯中的任何東西？「翻轉」不完全是一個有用的診斷。 – 2011-01-21 04:01:50

AHAH！我解決了這個問題。顯然，當我將複選框的可見性設置爲none時，由於某種原因它也將checkvalue設置爲null。我曾預料它會保持checkvalue，但由於某種原因，它沒有。

來源

2011-01-21 06:27:49 Sean

lifebox

未啓用。另外，還請檢查test()函數，即alert()語句有一個未定義的變量。

如果您使用Google chrome（或任何其他可幫助您調試的瀏覽器），我會建議您通過您的代碼行進行調試。

來源

2011-01-21 04:03:54 SuperSaiyan

在鉻，我得到的是「未捕獲TypeError：無法讀取屬性'檢查'null」 – Sean 2011-01-21 05:37:39

我認爲你最好使用簡單的等式來檢查你的複選框的狀態，因爲我很漂亮，結果不是布爾值。

因此，這將是類似的東西：

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

或者乾脆

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

，而不是

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

來源

2011-01-21 06:11:53 Sheavi

爲什麼我的腳本不能使用複選框？

回答

相關問題