javascript - 无法在 HTMLImageElement.changeImg 处设置未定义的属性“src”

Question

在这段代码中，当我使用 [i] 时它不起作用，但如果我使用 [0] 或 [1] 而不是 [i] 它起作用。我不明白为什么 [i] 不能与 src 一起使用。

HTML 代码

    <div  class="player">
     <p >Player 1
     </p>
     <img  id="myimg" src="images/dice6.png">

    </div>
    
    <div class="player">
        <p> Player 2
        </p>
        <img  id="myimg" src="images/dice6.png">
   
    </div>

JS代码

var images = ["images/dice1.png","images/dice2.png","images/dice3.png","images/dice4.png","images/dice5.png","images/dice6.png"];


for (var i = 0; i < document.querySelectorAll("#myimg").length; i++){
document.querySelectorAll("#myimg")[i].addEventListener("click", changeImg);

 function changeImg(){
 var randomNumber1 = Math.floor(Math.random() * images.length);

 document.querySelectorAll("#myimg")[i].src = images[randomNumber1] ;
 }
}

标签： javascriptarraysdom

Answer 1

不要使用 ID 的双精度，它们必须是唯一的。更好地使用类。

编辑版本

在 eventListener 中为您的 changeImg 调用一个函数。获取随机图像并使用 `this` 获取实际元素并更改源。

注意：因为 JS 中的随机并不是真正随机的，所以我添加了随机搜索，只要图像与实际相同。否则，您有时不得不单击多个进行更改。

为了进行测试，最好查看是否使用full_page链接（在输出窗口的右上角）。

var images = ["https://media.flaticon.com/dist/min/img/home/kiranshastry.png","https://www.pokewiki.de/images/thumb/d/d5/Sugimori_848.png/250px-Sugimori_848.png","https://assets.pokemon.com/assets/cms2/img/pokedex/full/034.png","https://assets.pokemon.com/assets/cms2/img/pokedex/full/030.png"];

for (let i = 0; i < document.querySelectorAll(".myimg").length; i++){
  document.querySelectorAll(".myimg")[i].addEventListener("click", changeImg);
}

function changeImg(){
  let randomNumber1;
  do {
      randomNumber1 = Math.floor(Math.random() * images.length);
  } while (this.src == images[randomNumber1]);
  this.src = images[randomNumber1] ;
}

<div  class="player">
     <p >Player 1</p>
     <img  class="myimg" src="https://www.pokewiki.de/images/thumb/d/d5/Sugimori_848.png/250px-Sugimori_848.png">
</div>
 <div class="player">
     <p> Player 2</p>
     <img  class="myimg" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/034.png">
</div>