I am currently experiencing an issue with the checkboxes in my JavaScript game. They do not respond to individual clicks as expected. Each time I log the output, I receive index 0 regardless of which box I click on. The checkboxes seem unresponsive but the level functions are working correctly.
// JavaScript code for handling checkboxes and levels
window.onload = function() {
console.log('DOM is loaded');
// Function to check all checkboxes
fillAll = function() {
for (var i = 0; i < 25; i++) {
document.bulbform.elements[i].checked = 1;
}
};
// Function to clear all checkboxes
clearAll = function() {
for (var i = 0; i < 25; i++) {
document.bulbform.elements[i].checked = 0;
}
};
// Functions for different game levels
levelOne = function() {
clearAll();
document.bulbform.elements[10].checked = 1;
document.bulbform.elements[12].checked = 1;
document.bulbform.elements[14].checked = 1;
};
// Define other level functions here...
// Check if all checkboxes are checked
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!");
}
};
// Function to toggle checkbox value
check = function(v) {
a = parseInt(v);
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">
<!-- Checkbox inputs with labels -->
<!-- Update values, IDs, and other attributes as needed -->
<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>
<!-- Button to clear checkboxes -->
<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>