我的复选框没有分别回应什么？
[英]What aren't my checkboxes responding individually?
问题描述
So the issue I am having is that my checkboxes in my JS game isn't responding to individual clicks. 
因此，我遇到的问题是我的JS游戏中的复选框无法响应单个点击。 When I console.log, I get index 0 every time, no matter which box I click and a non responsive check box. 当我console.log时，无论我单击哪个框和一个无响应的复选框，每次都会得到索引0。 However, the level functions are responding. 但是，级别功能正在响应。
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 has good advice, but your actual issue is here: Dai提供了很好的建议，但您的实际问题在这里：
... onclick="javascript:check(value)" ...
There no global value variable so you're passing undefined , which evaluates to 0. What you actually want to pass is the value of the checkbox: 没有全局值变量，因此您要传递undefined ，其值为0。您真正想要传递的是复选框的值：
... onclick="javascript:check(this.value) ...
Oh, also: 哦，还：
checkboxes in my JS game isn't responding to individual clicks
because you're doing: 因为你在做：
if (document.bulbform.elements[v].checked == 1) {
document.bulbform.elements[v].checked = 0;
} else {
document.bulbform.elements[v].checked = 1;
}
So if the checkbox is unchecked and then clicks on it, it's state in the listener is checked, so you uncheck it again. 因此，如果未选中该复选框然后单击它，则它在侦听器中的状态已选中，因此您再次取消选中它。 And vice versa if it's checked (the user clicks, unchecks it, then the listener checks it again). 反之亦然，如果已选中（用户单击，取消选中，然后侦听器再次选中它）。 This is nonsensical, just remove the listener and let the checkbox be a checkbox by itself. 这是荒谬的，只需删除侦听器，然后使复选框本身成为复选框即可。
解决方案2
0 2016-10-17 07:45:53
You are doing wrong I guess. 我猜你做错了。 1) by default you have your checkbox clicked true 2) On clicking the checkbox,it turn to false but your code has 1）默认情况下，您的复选框被单击为true 2）单击该复选框时，它变为false，但是您的代码具有
if (document.bulbform.elements[v].checked == 1) { document.bulbform.elements[v].checked = 0; } else { document.bulbform.elements[v].checked = 1; }
which turn the checkbox again to true. 将复选框再次设为true。 So whenever you try to click the checkbox, checked will return false as its state changes, and ur code changes that changed to true again 因此，每当您尝试单击该复选框时，checked都会在状态更改时返回false，而您的代码更改又变为true
Remove the above code from your code. 从您的代码中删除上面的代码。 It will work fine. 它将正常工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
为什么我的HTML控件没有响应？ - Why aren't my HTML controls responding?
为什么我的JavaScript复选框不起作用？ - Why aren't my javascript checkboxes working?
怎么了 复选框不起作用 - What's wrong here? Checkboxes aren't working
为什么我的复选框没有使用 Redux 更新？ - Why aren't my checkboxes updating using Redux?
如何使未选中的复选框变灰？ - How to grey out checkboxes that aren't checked?
如何隐藏未选中的复选框？ - How to hide checkboxes that aren't checked?
这些CSS复选框为什么不显示刻度线？ - Why aren't these CSS Checkboxes showing their ticks?
我的代码无效 - my codes aren't working
我的布尔人不工作吗？ - My Bools Aren't working?
我的迹象没有改变 - My signs aren't changing
相关标签