What aren't my checkboxes responding individually?
Question
So the issue I am having is that my checkboxes in my JS game isn't responding to individual clicks. When I console.log, I get index 0 every time, no matter which box I click and a non responsive check box. 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 answers
solution1
2 2016-10-17 04:01:27
Dai has good advice, but your actual issue is here:
... 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:
... 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.
solution2
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
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. 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
Remove the above code from your code. It will work fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why aren't my HTML controls responding?
Why aren't my javascript checkboxes working?
What's wrong here? Checkboxes aren't working
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?
Why aren't these CSS Checkboxes showing their ticks?
my codes aren't working
My Bools Aren't working?
My signs aren't changing
Related Tags