gpt4 book ai didi

javascript - 什么不是我的复选框单独响应?

转载 作者:太空宇宙 更新时间:2023-11-04 02:09:22 25 4
gpt4 key购买 nike

所以我遇到的问题是我的 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>

最佳答案

Dai 有很好的建议,但您的实际问题在这里:

... onclick="javascript:check(value)" ...

没有全局 value 变量,因此您传递的是 undefined,它的计算结果为 0。您实际想要传递的是复选框的值:

... onclick="javascript:check(this.value) ...

哦,还有:

checkboxes in my JS game isn't responding to individual clicks

因为你在做:

if (document.bulbform.elements[v].checked == 1) {
document.bulbform.elements[v].checked = 0;
} else {
document.bulbform.elements[v].checked = 1;
}

因此,如果取消选中该复选框然后单击它,则它在监听器中的状态已选中,因此您再次取消选中它。如果它被选中,反之亦然(用户点击,取消选中,然后听众再次选中)。这是荒谬的,只需删除监听器并让复选框本身成为一个复选框即可。

关于javascript - 什么不是我的复选框单独响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40078090/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com