如何仅在未选中复选框时执行函数？

Question

我正在开发一个小骰子游戏，用户可以锁定特定的骰子。但是我不能让它与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>

​

Answer 1

我会使用带有背景图像的div，而不是交换实际图像对象的src。

您可以使用循环和针对复选框的父项来简化此操作，以获得模具图像。

​

document.querySelector('.btn-roll').addEventListener('click', rollDice);

function rollDice(e) {
  let checked = document.querySelectorAll('#dice .die-wrapper input:checked');
  Array.from(checked).forEach(cb => {
    let die = cb.parentElement.querySelector('.die');
    let roll = getRandomIntInclusive(1, 6);
    die.className = 'die die-' + roll;
    die.setAttribute('data-roll', roll);
  });
}

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values_inclusive
function getRandomIntInclusive(min, max) {
  if (arguments.length === 1) { max = min; min = 0; }
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

.die-wrapper {
  display: inline-block;
}

.die {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
}

.die-1 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=1'); }
.die-2 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=2'); }
.die-3 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=3'); }
.die-4 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=4'); }
.die-5 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=5'); }
.die-6 { background-image: url('https://place-hold.it/32x32/f00/000.png&bold&text=6'); }

<form id="dice">
  <div class="die-wrapper">
    <input type="checkbox" name="die-1" value="dice-1" />
    <div class="die die-1"></div>
  </div>
  <div class="die-wrapper">
    <input type="checkbox" name="die-2" value="dice-2" />
    <div class="die die-1"></div>
  </div>
  <div class="die-wrapper">
    <input type="checkbox" name="die-3" value="dice-3" />
    <div class="die die-1"></div>
  </div>
</form>
<br />
<button class="btn-roll">Roll</button>

​

使用Unicode字形显示模模面...

​

document.querySelector('.btn-roll').addEventListener('click', rollDice);

function rollDice(e) {
  let checked = document.querySelectorAll('#dice .die-wrapper input:checked');
  Array.from(checked).forEach(cb => {
    let die = cb.parentElement.querySelector('.die');
    let roll = getRandomIntInclusive(1, 6);
    die.className = 'die die-' + roll;
    die.setAttribute('data-roll', roll);
  });
}

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#Getting_a_random_integer_between_two_values_inclusive
function getRandomIntInclusive(min, max) {
  if (arguments.length === 1) {
    max = min;
    min = 0;
  }
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

.die-wrapper {
  display: inline-block;
}

.die {
  display: inline-block;
  height: 2em;
}

.die::after {
  font-size: 3em;
  line-height: 0.75em;
}

.die-1::after { content: '\2680'; }
.die-2::after { content: '\2681'; }
.die-3::after { content: '\2682'; }
.die-4::after { content: '\2683'; }
.die-5::after { content: '\2684'; }
.die-6::after { content: '\2685'; }

<form id="dice">
  <div class="die-wrapper">
    <input type="checkbox" name="die-1" value="dice-1" />
    <div class="die die-1"></div>
  </div>
  <div class="die-wrapper">
    <input type="checkbox" name="die-2" value="dice-2" />
    <div class="die die-1"></div>
  </div>
  <div class="die-wrapper">
    <input type="checkbox" name="die-3" value="dice-3" />
    <div class="die die-1"></div>
  </div>
</form>
<br />
<button class="btn-roll">Roll</button>

​

Answer 2

您正在使用"else-if“语句，当其中一个语句运行时，它会有效地短路您的逻辑。将"else-if“替换为"if":s。

(我将最后一个" else "-statement替换为"if"-statement，这是对其他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');
  }
}

Answer 3

const checkboxes = [
document.getElementById("dice-1")
document.getElementById("dice-2")
document.getElementById("dice-3")
document.getElementById("dice-4")
document.getElementById("dice-5")
];

let allChecked = true;
for (const checkbox of checkboxes) {
if (!checkbox.checked) allChecked = false;
}

if (allChecked) {
roll();
}