如何修复我的 JS 老虎机 - 复选框错误

Question

所以我想制作一个老虎机游戏，当用户按下数字复选框时，他将玩数字，如果他按下图像按钮，他将玩图像。但是当我选择数字和图像之后，当我回到数字之后，游戏仍然是图像。我怎样才能解决这个问题。你可以在这里看到一个演示：

const card = document.querySelectorAll('.card');
const button = document.querySelector('.button');
const message = document.querySelector('.message');
const checkboxes = document.querySelectorAll('.check');
const numbers = document.querySelector('#numbers');
const images = document.querySelector('#images');

numbers.addEventListener('change', function (){
    button.addEventListener('click', randomNumbers);


  });

images.addEventListener('change', function (){
  button.addEventListener('click', randomNumbers2);

  });



function randomNumbers() {

    let arr = [];
    for (number of card){
        let random = Math.floor(Math.random() * 3);
        number.innerHTML = random;
        arr.push(number.textContent);   
    }
    //transforming the array into array of card
    let arr2 = arr.map(function(num) {
        return parseInt(num, 10);
      });
   
    const allEqual = arr => arr.every( num => num === arr[0] )
    if(allEqual(arr2)){
        result = message.innerHTML = "YOU WON!";
        message.classList.remove("lost");
        message.classList.add("won"); 
    }else{
        result = message.innerHTML = "YOU LOST!";
        message.classList.add("lost");
        message.classList.remove("won");
    }
    
}




function randomNumbers2() {

  let arr3 = [];

  for (number of card){

    let img_arr = ['https://img1.looper.com/img/gallery/captain-americas-mcu-story-explained/intro-1566320977.jpg', 'https://i.imgur.com/2QFZ9Ld.jpg', 'https://images.alphacoders.com/102/thumb-1920-1026220.jpg']
   
    let random = Math.floor(Math.random() * 3);
    let img =  '<img src="' +img_arr[random] + '" alt = "">';
    number.innerHTML = img
    arr3.push(number.innerHTML);   
    

}
const allEqual = arr => arr.every( num => num === arr[0] )
    if(allEqual(arr3)){
        result = message.innerHTML = "YOU WON!";
        message.classList.remove("lost");
        message.classList.add("won"); 
    }else{
        result = message.innerHTML = "YOU LOST!";
        message.classList.add("lost");
        message.classList.remove("won");
    }
    
  
}
checkboxes.forEach(input => { 
  input.addEventListener('click',function (){
    for(var i = 0; i < checkboxes.length; i++){
      //uncheck all
      if(checkboxes[i].checked == true){
        checkboxes[i].checked = false;
      }
    }
    //set checked of clicked object
    if(input.checked == true){
      input.checked = false;
    }else{
      input.checked = true;
    } 
  })
})

.container{
    width: 60%;
    height: 100%;
    margin: 0 auto;
}
.card{
    width: 5rem;
    height: 5rem;
    border: 1px solid rgb(206, 21, 21);
    text-align: center;
    margin-right: 5px;
    font-size: 2rem;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
}
.board{
    display: flex;
    justify-content: center;
    align-items: center;
}

.board button {
    padding: 20px;
    border: none;
    background-color: rgb(0, 162, 255);
    color: whitesmoke;
    cursor: pointer;
}

.message{
    text-align: center;
    top: 20%;
}

.lost{
    color: red;
}

.won{
    color: green;
}

form{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

form  label{
    margin-right: 15px;
}

img{
    width: 5rem;
    height: 5rem;
    border-radius: 10px;
}

    <div class="container">
      <form>
          <label>
            <input class="check" id="numbers" type="checkbox" >    Numbers
          </label>
          <label>
            <input class="check" id="images" type="checkbox" > Images
          </label>
      
      </form>  
        <div class="board">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <button class="button">Play</button>
        </div>
        <h1 class="message"></h1>
    </div>

Answer 1

addEventListener() 不会删除（或替换）元素上的现有事件处理程序。您可以修改按钮的 onClick 属性而不是使用 addEventListener()（只能有一个 onClick），或者您可以在添加另一个之前删除按钮的现有事件侦听器。下面的代码使用第二种方法。

我还将复选框更改为单选按钮，因为一次只能选择一个选项。这消除了仅用于切换复选框的另一个事件处理程序的需要。

这只是对现有内容的轻微修改。理想情况下，您应该将一个事件处理程序附加到按钮，该事件处理程序将检查单选按钮的状态并调用图像或数字例程。 编辑：在下面添加了第二个示例

示例 1：在添加新事件侦听器之前删除事件侦听器

const card = document.querySelectorAll('.card');
const button = document.querySelector('.button');
const message = document.querySelector('.message');
const numbers = document.querySelector('#numbers');
const images = document.querySelector('#images');

// Changed the two functions below
numbers.addEventListener('change', function (){
    if (numbers.checked) {
       button.removeEventListener('click', randomNumbers2);
       button.addEventListener('click', randomNumbers);
    }
 });
images.addEventListener('change', function (){
    if (images.checked) {
       button.removeEventListener('click', randomNumbers);
       button.addEventListener('click', randomNumbers2);
    }
});


function randomNumbers() {
    let arr = [];
    for (number of card){
        let random = Math.floor(Math.random() * 3);
        number.innerHTML = random;
        arr.push(number.textContent);   
    }
    //transforming the array into array of card
    let arr2 = arr.map(function(num) {
        return parseInt(num, 10);
      });
   
    const allEqual = arr => arr.every( num => num === arr[0] )
    if(allEqual(arr2)){
        result = message.innerHTML = "YOU WON!";
        message.classList.remove("lost");
        message.classList.add("won"); 
    }else{
        result = message.innerHTML = "YOU LOST!";
        message.classList.add("lost");
        message.classList.remove("won");
    }
    
}


function randomNumbers2() {
  let arr3 = [];

  for (number of card){
    let img_arr = ['https://img1.looper.com/img/gallery/captain-americas-mcu-story-explained/intro-1566320977.jpg', 'https://i.imgur.com/2QFZ9Ld.jpg', 'https://images.alphacoders.com/102/thumb-1920-1026220.jpg']
   
    let random = Math.floor(Math.random() * 3);
    let img =  '<img src="' +img_arr[random] + '" alt = "">';
    number.innerHTML = img
    arr3.push(number.innerHTML);   
}

const allEqual = arr => arr.every( num => num === arr[0] )
    if(allEqual(arr3)){
        result = message.innerHTML = "YOU WON!";
        message.classList.remove("lost");
        message.classList.add("won"); 
    }else{
        result = message.innerHTML = "YOU LOST!";
        message.classList.add("lost");
        message.classList.remove("won");
    }
}

.container{
    width: 60%;
    height: 100%;
    margin: 0 auto;
}
.card{
    width: 5rem;
    height: 5rem;
    border: 1px solid rgb(206, 21, 21);
    text-align: center;
    margin-right: 5px;
    font-size: 2rem;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
}
.board{
    display: flex;
    justify-content: center;
    align-items: center;
}

.board button {
    padding: 20px;
    border: none;
    background-color: rgb(0, 162, 255);
    color: whitesmoke;
    cursor: pointer;
}

.message{
    text-align: center;
    top: 20%;
}

.lost{
    color: red;
}

.won{
    color: green;
}

form{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

form  label{
    margin-right: 15px;
}

img{
    width: 5rem;
    height: 5rem;
    border-radius: 10px;
}

    <div class="container">
      <form>
          <label>
            <input class="check" id="numbers" type="radio" name="game">Numbers
          </label>
          <label>
            <input class="check" id="images" type="radio" name="game">Images
          </label>
      
      </form>  
        <div class="board">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <button class="button">Play</button>
        </div>
        <h1 class="message"></h1>
    </div>

示例2：为按钮添加点击事件并为单选按钮删除事件代码

const card = document.querySelectorAll('.card');
const button = document.querySelector('#play-button');
const message = document.querySelector('.message');
const checkboxes = document.querySelectorAll('.check');
const numbers = document.querySelector('#numbers');
const images = document.querySelector('#images');

// Changed the two functions below
button.addEventListener('click', function (e){
    // Prevent normal button click events
    e.preventDefault();

    if (numbers.checked) {
       randomNumbers();
    } else {
       randomNumbers2();
    }
 });


function randomNumbers() {
    let arr = [];
    for (number of card){
        let random = Math.floor(Math.random() * 3);
        number.innerHTML = random;
        arr.push(number.textContent);   
    }
    //transforming the array into array of card
    let arr2 = arr.map(function(num) {
        return parseInt(num, 10);
      });
   
    const allEqual = arr => arr.every( num => num === arr[0] )
    if(allEqual(arr2)){
        result = message.innerHTML = "YOU WON!";
        message.classList.remove("lost");
        message.classList.add("won"); 
    }else{
        result = message.innerHTML = "YOU LOST!";
        message.classList.add("lost");
        message.classList.remove("won");
    }
    
}


function randomNumbers2() {
  let arr3 = [];

  for (number of card){
    let img_arr = ['https://img1.looper.com/img/gallery/captain-americas-mcu-story-explained/intro-1566320977.jpg', 'https://i.imgur.com/2QFZ9Ld.jpg', 'https://images.alphacoders.com/102/thumb-1920-1026220.jpg']
   
    let random = Math.floor(Math.random() * 3);
    let img =  '<img src="' +img_arr[random] + '" alt = "">';
    number.innerHTML = img
    arr3.push(number.innerHTML);   
}

const allEqual = arr => arr.every( num => num === arr[0] )
    if(allEqual(arr3)){
        result = message.innerHTML = "YOU WON!";
        message.classList.remove("lost");
        message.classList.add("won"); 
    }else{
        result = message.innerHTML = "YOU LOST!";
        message.classList.add("lost");
        message.classList.remove("won");
    }
}

.container{
    width: 60%;
    height: 100%;
    margin: 0 auto;
}
.card{
    width: 5rem;
    height: 5rem;
    border: 1px solid rgb(206, 21, 21);
    text-align: center;
    margin-right: 5px;
    font-size: 2rem;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
}
.board{
    display: flex;
    justify-content: center;
    align-items: center;
}

.board button {
    padding: 20px;
    border: none;
    background-color: rgb(0, 162, 255);
    color: whitesmoke;
    cursor: pointer;
}

.message{
    text-align: center;
    top: 20%;
}

.lost{
    color: red;
}

.won{
    color: green;
}

form{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
}

form  label{
    margin-right: 15px;
}

img{
    width: 5rem;
    height: 5rem;
    border-radius: 10px;
}

    <div class="container">
      <form>
          <label>
            <input class="check" id="numbers" type="radio" name="game">Numbers
          </label>
          <label>
            <input class="check" id="images" type="radio" name="game">Images
          </label>
      
      </form>  
        <div class="board">
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <button class="button" id="play-button">Play</button>
        </div>
        <h1 class="message"></h1>
    </div>

如何修复我的 JS 老虎机 - 复选框错误

How can I fix my JS slot machine - checkbox error

html

javascript

event-handling

示例 1：在添加新事件侦听器之前删除事件侦听器

示例2：为按钮添加点击事件并为单选按钮删除事件代码