如何使用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);
  });
}

以下是完整代码：

＆＃13;

＆＃13;

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);

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

有很多问题。

1. 您错过了在HTML中更新数据属性（data-animal-cat）。所有3行都具有相同的值。
2. 如果else语句具有赋值运算符（=）而不是等于运算符（==或===）。
3. 点击时传递元素，而不是传递数据属性。
4. 在每次点击时获取随机值（即在点击事件中初始化randomBird）

这是更新的代码。

＆＃13;
＆＃13;
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);
＆＃13;
#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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;