无法在 HTMLImageElement.changeImg 处设置未定义的属性“src”[重复]

Posted 2023-02-21

【中文标题】无法在 HTMLImageElement.changeImg 处设置未定义的属性“src”[重复]

【英文标题】：Cannot set property 'src' of undefined at HTMLImageElement.changeImg [duplicate]

【发布时间】：2020-12-18 06:29:21

【问题描述】：

在这段代码中，当我使用 [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] ;
 

【问题讨论】：

重复的 ID 是无效的 HTML。如果您使用重复的 ID，可能会导致异常行为，例如选择器无法按预期工作。先解决这个问题。

你不能有多个具有相同 id 的元素

@CertainPerformance 我已经测试过它不起作用。

【参考方案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>

【讨论】：

还是不行。

对不起，我没有用图像测试它，所以我没有看到错误。我现在改了。