イベントリスナーを使用して関数に引数を渡すにはどうすればよいですか？

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. HTMLのデータ属性（data-animal-cat）の更新に失敗しました。 3行はすべて同じ値を持ちます。
2. 等価演算子（==または===）の代わりに代入演算子（=）がある場合。
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>