javascript - 仅在未选中复选框的情况下如何执行功能?
问题描述
我正在开发一个小骰子游戏,用户可以在其中锁定特定的骰子。但我无法让它与 if else 语句一起使用。如何仅在未选中复选框的情况下“滚动”骰子?
const btnRoll = document.querySelector('.btn_roll');
btnRoll.addEventListener('click', () => {
roll();
});
function roll() {
const dice1 = document.querySelector('.dice1');
const dice2 = document.querySelector('.dice2');
const dice3 = document.querySelector('.dice3');
if (!document.getElementById('dice-1').checked) {
randomOne = Math.floor(Math.random() * 6) + 1;
dice1.src = `img/dice-${randomOne}.png`;
console.log(!document.getElementById('dice-1').checked);
} else if (!document.getElementById('dice-2').checked) {
randomTwo = Math.floor(Math.random() * 6) + 1;
dice2.src = `img/dice-${randomTwo}.png`;
} else if (!document.getElementById('dice-3').checked) {
randomThree = Math.floor(Math.random() * 6) + 1;
dice3.src = `img/dice-${randomThree}.png`;
} else {
console.log('no checkboxes are selected');
}
}
<form id="dices">
<input type="checkbox" id="dice-1" name="dice-1" value="dice-1" />
<img src="img/dice-5.png" alt="Dice" class="dice1" id="dice-1" />
<input type="checkbox" id="dice-2" name="dice-2" value="dice-2" />
<img src="img/dice-5.png" alt="Dice" class="dice2" id="dice-2" />
<input type="checkbox" id="dice-3" name="dice-3" value="dice-3" />
<img src="img/dice-5.png" alt="Dice" class="dice3" id="dice-3" />
<input type="checkbox" id="dice-4" name="dice-4" value="dice-4" /> 5.png" alt="Dice" class="dice6" id="dice-6" />
</form>
<br />
<button class="btn_roll">roll</button>
解决方案
您正在使用“else-if”语句,当其中一个运行时,它会有效地短路您的逻辑。仅将“else-if”替换为“if”:s。
(我用“if”语句替换了最后一个“else”语句,这是对其他 if 语句的否定,因为我们不能在这里做 else。)
function roll() {
const dice1 = document.querySelector('.dice1');
const dice2 = document.querySelector('.dice2');
const dice3 = document.querySelector('.dice3');
const firstDiceChecked = document.getElementById('dice-1').checked
const secondDiceChecked = document.getElementById('dice-2').checked
const thirdDiceChecked = document.getElementById('dice-3').checked
if (!firstDiceChecked) {
randomOne = Math.floor(Math.random() * 6) + 1;
dice1.src = `img/dice-${randomOne}.png`;
console.log(!document.getElementById('dice-1').checked);
}
if (!secondDiceChecked) {
randomTwo = Math.floor(Math.random() * 6) + 1;
dice2.src = `img/dice-${randomTwo}.png`;
}
if (!thirdDiceChecked) {
randomThree = Math.floor(Math.random() * 6) + 1;
dice3.src = `img/dice-${randomThree}.png`;
}
if (!firstDiceChecked && !secondDiceChecked && !thirdDiceChecked) {
console.log('no checkboxes are selected');
}
}
推荐阅读
- sql - MS Access,使用 VB 代码通过网络链接后端表
- c# - 在 PDF 文件创建期间添加新页面(如果需要)
- vue.js - 如何在 Vue 中创建一个数字输入组件,其限制不允许超出限制
- javascript - 为什么 ComponentShouldUpdate 会阻止评论呈现?
- vba - VBA:用于数组的 For 循环给出错误
- android - 在不使用运行时权限的情况下请求权限
- python - 我不明白如何遍历 json 文件
- sql-server - 无法使用来自 Linux 7(CentOS7)环境的 ms sql 驱动程序 13 连接到 MS SQL 数据库实例
- vba - 为什么我的 MergeField 名称是通过 Excel 中的 MailMerge 提取到 PDF 的唯一数据?
- rest - Siebel RESTful API 不适用于自定义对象