Как передать аргументы функции с помощью eventlisteners?

Question

Я создаю игру с флеш-картой, в которой пользователь будет выбирать группу животных, а затем случайное животное из этой группы появится на экране.

Однако, то же самое значение отображается независимо от того, какое значение передается функции displayAnimal(datavalue)

Вот хлопотно часть:

var classname = document.getElementsByClassName("row") 
for (var i = 0; i < classname.length; i++) { 
    var datavalue; 
    datavalue = classname[i].getAttribute("data-animal-cat"); 
    classname[i].addEventListener("click", function() { 
    displayAnimal(datavalue); 
    }); 
} 

Вот полный код:

var birdArray = ["Owl", "Hummingbird", "Toucan"] 
 
var dogArray = ["Bulldog", "Dash Hound", "German Shepard"] 
 
var fishArray = ["Goldfish", "Mahi Mahi", "Catfish"] 
 
var randomBird = birdArray[Math.floor(Math.random() * birdArray.length)]; 
 
var randomDog = dogArray[Math.floor(Math.random() * dogArray.length)]; 
 
var randomFish = fishArray[Math.floor(Math.random() * fishArray.length)]; 
 

 
function initFlashCardGame() { 
 
    var classname = document.getElementsByClassName("row") 
 
    for (var i = 0; i < classname.length; i++) { 
 
     var datavalue; 
 
     datavalue = classname[i].getAttribute("data-animal-cat"); 
 
     classname[i].addEventListener("click", function() { 
 
     displayAnimal(datavalue); 
 
     }); 
 
    } 
 

 
    function displayAnimal(datavalue) { 
 
     var animalType; 
 
     if (datavalue === "birds") { 
 
     alert(randomBird); 
 
     } else if (datavalue = "dogs") { 
 
     alert(randomDog); 
 
     } else if (datavalue = "fish") { 
 
     alert(randomFish); 
 
     } 
 
    } 
 
    } 
 
    //add event listener when window loads   
 
window.addEventListener("load", initFlashCardGame);

#container { 
 
    width: 100%; 
 
    max-width: 480px; 
 
    margin: auto; 
 
    font-family: arial; 
 
    border: 2px solid black; 
 
    padding: 10px; 
 
} 
 
.row { 
 
    background: #116995; 
 
    pading: 20px; 
 
    margin: 6px; 
 
    padding: 20px; 
 
    font-size: 20px; 
 
    color: white; 
 
} 
 
.row:hover { 
 
    background: yellow; 
 
    color: red; 
 
    font-weight: bold; 
 
    font-size: 25px; 
 
} 
 
p { 
 
    display: block; 
 
    text-align: center; 
 
    color: black; 
 
    font-size: 25px; 
 
    font-weight: bold; 
 
}

<div id="container"> 
 
    <p>SELECT ANIMAL GROUP</p> 
 
    <div class="row" data-animal-cat="birds"> 
 
    Birds 
 
    </div> 
 
    <div class="row" data-animal-cat="birds"> 
 
    Dogs 
 
    </div> 
 
    <div class="row" data-animal-cat="birds"> 
 
    Fish 
 
    </div> 
 
</div>

Answer 1

Существует несколько вопросов.

1. Вы пропустили обновление атрибута данных (data-animal-cat) в формате HTML. Все три строки имеют одинаковое значение.
2. Если оператор else имеет оператор присваивания (=) вместо оператора равенства (== или ===).
3. Передайте элемент при щелчке вместо передачи атрибута данных.
4. Получить случайные значения на каждый клик (т.е. Initialize randomBird на событие щелчка)

Вот обновленный код.

var birdArray = ["Owl", "Hummingbird", "Toucan"] 
 
var dogArray = ["Bulldog", "Dash Hound", "German Shepard"] 
 
var fishArray = ["Goldfish", "Mahi Mahi", "Catfish"] 
 

 
function initFlashCardGame() { 
 
    var classname = document.getElementsByClassName("row"); 
 

 
    for (var i = 0; i < classname.length; i++) { 
 
     classname[i].addEventListener("click", function() { 
 
     displayAnimal(this); 
 
     }); 
 
    } 
 

 
    function displayAnimal(obj) { 
 
     var dv = obj.getAttribute("data-animal-cat"); 
 

 
     if (dv == "birds") { 
 
     var randomBird = birdArray[Math.floor(Math.random() * birdArray.length)]; 
 
     alert(randomBird); 
 
     } else if (dv == "dogs") { 
 
     var randomDog = dogArray[Math.floor(Math.random() * dogArray.length)]; 
 
     alert(randomDog); 
 
     } else if (dv == "fish") { 
 
     var randomFish = fishArray[Math.floor(Math.random() * fishArray.length)]; 
 
     alert(randomFish); 
 
     } 
 
    } 
 
    } 
 
    //add event listener when window loads   
 
window.addEventListener("load", initFlashCardGame);

#container { 
 
    width: 100%; 
 
    max-width: 480px; 
 
    margin: auto; 
 
    font-family: arial; 
 
    border: 2px solid black; 
 
    padding: 10px; 
 
} 
 
.row { 
 
    background: #116995; 
 
    pading: 20px; 
 
    margin: 6px; 
 
    padding: 20px; 
 
    font-size: 20px; 
 
    color: white; 
 
} 
 
.row:hover { 
 
    background: yellow; 
 
    color: red; 
 
    font-weight: bold; 
 
    font-size: 25px; 
 
} 
 
p { 
 
    display: block; 
 
    text-align: center; 
 
    color: black; 
 
    font-size: 25px; 
 
    font-weight: bold; 
 
}

<div id="container"> 
 
    <p>SELECT ANIMAL GROUP</p> 
 
    <div class="row" data-animal-cat="birds"> 
 
    Birds 
 
    </div> 
 
    <div class="row" data-animal-cat="dogs"> 
 
    Dogs 
 
    </div> 
 
    <div class="row" data-animal-cat="fish"> 
 
    Fish 
 
    </div> 
 
</div>