我的復選框沒有分別回應什么？
[英]What aren't my checkboxes responding individually?
問題描述
因此，我遇到的問題是我的JS游戲中的復選框無法響應單個點擊。 當我console.log時，無論我單擊哪個框和一個無響應的復選框，每次都會得到索引0。 但是，級別功能正在響應。
window.onload = function() { console.log('DOM is loaded'); fillAll = function() { // event.preventDefault(); for (var i = 0; i < 25; i++) { document.bulbform.elements[i].checked = 1; } }; clearAll = function() { for (var i = 0; i < 25; i++) { document.bulbform.elements[i].checked = 0; } }; levelOne = function() { clearAll(); document.bulbform.elements[10].checked = 1; document.bulbform.elements[12].checked = 1; document.bulbform.elements[14].checked = 1; }; levelTwo = function() { clearAll(); document.bulbform.elements[12].checked = 1; document.bulbform.elements[16].checked = 1; document.bulbform.elements[17].checked = 1; document.bulbform.elements[18].checked = 1; document.bulbform.elements[20].checked = 1; document.bulbform.elements[21].checked = 1; document.bulbform.elements[22].checked = 1; document.bulbform.elements[23].checked = 1; document.bulbform.elements[24].checked = 1; }; levelThree = function() { fillAll(); document.bulbform.elements[4].checked = 0; document.bulbform.elements[6].checked = 0; document.bulbform.elements[7].checked = 0; document.bulbform.elements[8].checked = 0; document.bulbform.elements[11].checked = 0; document.bulbform.elements[12].checked = 0; document.bulbform.elements[13].checked = 0; document.bulbform.elements[16].checked = 0; document.bulbform.elements[17].checked = 0; document.bulbform.elements[18].checked = 0; document.bulbform.elements[24].checked = 0; }; levelFour = function() { clearAll(); document.bulbform.elements[2].checked = 1; document.bulbform.elements[6].checked = 1; document.bulbform.elements[8].checked = 1; document.bulbform.elements[10].checked = 1; document.bulbform.elements[12].checked = 1; document.bulbform.elements[14].checked = 1; document.bulbform.elements[16].checked = 1; document.bulbform.elements[18].checked = 1; document.bulbform.elements[22].checked = 1; }; levelFive = function() { clearAll(); document.bulbform.elements[11].checked = 1; document.bulbform.elements[16].checked = 1; document.bulbform.elements[21].checked = 1; }; checkAll = function() { var win = 1; for (var i = 0; i < 25; i++) { if (document.bulbform.elements[i].checked == 1) { win = 0; } } if (win == 1) { alert("You Won!"); } }; check = function(v) { a = parseInt(v); // console.log(parseInt(a)); // console.log(typeof(a)); if (document.bulbform.elements[v].checked == 1) { document.bulbform.elements[v].checked = 0; } else { document.bulbform.elements[v].checked = 1; } checkAll(); }; };
<body> <div class="row"> <div class="col s12 m6"> <div class="card-panel blue-grey lighten-3"> <form name="bulbform"> <!-- Row One --> <input type="checkbox" value="0" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="1" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="2" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="3" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="4" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <!-- Row Two --> <input type="checkbox" value="5" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="6" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="7" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="8" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="9" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <!-- Row Three --> <input type="checkbox" value="10" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="11" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="12" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="13" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="14" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <!-- Row Four --> <input type="checkbox" value="15" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="16" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="17" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="18" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="19" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <!-- Row Five --> <input type="checkbox" value="20" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="21" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="22" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="23" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <input type="checkbox" value="24" onclick="javascript:check(value)" class="filled-in" id="filled-in-box" checked="1" /> <label for="filled-in-box"></label> <br> <!-- Stat Game Levels --> <a href="javascript:levelOne()" class="waves-effect waves-teal btn-flat">Level 1</a> <a href="javascript:levelTwo()" class="waves-effect waves-teal btn-flat">Level 2</a> <a href="javascript:levelThree()" class="waves-effect waves-teal btn-flat">Level 3</a> <a href="javascript:levelFour()" class="waves-effect waves-teal btn-flat">Level 4</a> <a href="javascript:levelFive()" class="waves-effect waves-teal btn-flat">Level 5</a> <!-- End Game Levels --> <br> <button class="btn waves-effect waves-light btn-large" type="reset" value="clear" name="action">Clear <i class="material-icons left">lightbulb_outline</i> </button> </div> </div> </div> <script type="text/javascript" src="game.js"></script> </body>
2 個解決方案
解決方案1
2 2016-10-17 04:01:27
Dai提供了很好的建議，但您的實際問題在這里：
... onclick="javascript:check(value)" ...
沒有全局值變量，因此您要傳遞undefined ，其值為0。您真正想要傳遞的是復選框的值：
... onclick="javascript:check(this.value) ...
哦，還：
我的JS游戲中的復選框未響應單個點擊
因為你在做：
if (document.bulbform.elements[v].checked == 1) {
document.bulbform.elements[v].checked = 0;
} else {
document.bulbform.elements[v].checked = 1;
}
因此，如果未選中該復選框然后單擊它，則它在偵聽器中的狀態已選中，因此您再次取消選中它。 反之亦然，如果已選中（用戶單擊，取消選中，然后偵聽器再次選中它）。 這是荒謬的，只需刪除偵聽器，然后使復選框本身成為復選框即可。
解決方案2
0 2016-10-17 07:45:53
我猜你做錯了。 1）默認情況下，您的復選框被單擊為true 2）單擊該復選框時，它變為false，但是您的代碼具有
if (document.bulbform.elements[v].checked == 1) { document.bulbform.elements[v].checked = 0; } else { document.bulbform.elements[v].checked = 1; }
將復選框再次設為true。 因此，每當您嘗試單擊該復選框時，checked都會在狀態更改時返回false，而您的代碼更改又變為true
從您的代碼中刪除上面的代碼。 它將正常工作。
為什么我的HTML控件沒有響應？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.