如何使用eventlisteners將參數傳遞給函數？

Question

我正在構建一個flashcard遊戲，用戶可以選擇動物組，然後該組中的隨機動物會在屏幕上彈出。

然而，相同的值出現，無論是傳遞給函數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. 您錯過了以HTML格式更新數據屬性（data-animal-cat）。所有3行具有相同的值。
2. 如果else語句具有賦值運算符（=）而不是相等運算符（==或===）。
3. 單擊時傳遞該元素，而不是傳遞數據屬性。
4. 每次點擊獲取隨機值（在點擊事件即初始化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>