Что мои чекбоксы не отвечают по отдельности?
Поэтому проблема, с которой я сталкиваюсь, заключается в том, что мои флажки в моей игре 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 ответа
У Дая есть хороший совет, но ваша актуальная проблема здесь:
... onclick="javascript:check(value)" ...
Там нет переменной глобального значения, поэтому вы передаете неопределенное значение, которое оценивается как 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;
}
Таким образом, если флажок снят, а затем щелкает по нему, его состояние в слушателе проверяется, поэтому вы снимаете флажок снова. И наоборот, если это проверено (пользователь щелкает, снимает флажок, затем слушатель проверяет это снова). Это бессмысленно, просто удалите слушателя и позвольте флажку быть флажком сам по себе.
Вы делаете неправильно, я думаю. 1) по умолчанию у вас установлен флажок true 2) При установке флажка он становится ложным, но ваш код имеет
if (document.bulbform.elements[v].checked == 1) {
document.bulbform.elements[v].checked = 0;
} else {
document.bulbform.elements[v].checked = 1;
}
который снова устанавливает флажок в true. Таким образом, всякий раз, когда вы пытаетесь установить флажок, флажок будет возвращать значение false при изменении состояния, а код вашего кода снова меняется на true.
Удалите приведенный выше код из вашего кода. Это будет работать нормально.