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. 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>