由于相同的 id 无法访问第二张图片答案

【问题标题】：Can't access the second image because of same id由于相同的 id 无法访问第二张图片
【发布时间】：2021-03-22 05:16:39
【问题描述】：

我正在尝试通过单击它并使用 getElementById 来替换图像，但即使我单击第二个图像，由于相同的 id，它也只会替换第一个图像，但我也尝试使用 class 和 getElementsByClassName 但它不工作.当我点击第二张图片时，我应该怎么做才能替换它？

<html>

<img src="https://img.icons8.com/wired/64/000000/bookmark-ribbon.png" id="img1" onclick="replaceImage()"/>
<img src="https://img.icons8.com/wired/64/000000/bookmark-ribbon.png" id="img1" onclick="replaceImage()"/>

<script>
    function replaceImage(){
        document.getElementById("img1").src = "https://img.icons8.com/dusk/64/000000/bookmark-ribbon.png";
                    
}
</script>
<html>

【问题讨论】：

HTML 中的 ID 应该是唯一的。要么使它们不同，要么使用不同的方式来访问元素。
Id 是唯一的，可以使用类。
@VLAZ 是的，我提到使用相同的 id 会产生问题，我也尝试过上课，但它不起作用，我不知道为什么，还有其他不同的方法可以使这项工作?
@ManasKhandelwal 使用 Class 甚至没有替换第一张图片
@Fenaz 你想要它可以切换吗？

标签： javascript html image

【解决方案1】：

你可以这样做：

const imgs = document.querySelectorAll(".img1");

for (let i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener("click", function() {
    imgs[i].src = "https://img.icons8.com/dusk/64/000000/bookmark-ribbon.png";
  });
}

/* Note This is not important. */
img:hover {
  cursor: pointer;
}

<img src="https://img.icons8.com/wired/64/000000/bookmark-ribbon.png" class="img1" />
<img src="https://img.icons8.com/wired/64/000000/bookmark-ribbon.png" class="img1" />

如果您希望它可切换，您可以这样做：

const imgs = document.querySelectorAll(".img1");

for (let i = 0; i < imgs.length; i++) {
  imgs[i].addEventListener("click", function() {
    imgs[i].classList.toggle("bookmarked");
    if (imgs[i].classList.contains("bookmarked")) {
      imgs[i].src = "https://img.icons8.com/dusk/64/000000/bookmark-ribbon.png";
    } else {
      imgs[i].src =
        "https://img.icons8.com/wired/64/000000/bookmark-ribbon.png";
    }
  });
}

/* Note This is not important. */
img:hover {
  cursor: pointer;
}

<img src="https://img.icons8.com/wired/64/000000/bookmark-ribbon.png" class="img1" />
<img src="https://img.icons8.com/wired/64/000000/bookmark-ribbon.png" class="img1" />
<img src="https://img.icons8.com/wired/64/000000/bookmark-ribbon.png" class="img1" />

【讨论】：

谢谢伙计，出色的回答，也感谢切换，我试图这样做但失败了。 :)

【解决方案2】：

如前所述，您不应该在两个图像标签上使用相同的 id。我还看到您两次使用绝对相同的代码，不推荐。但是，如果您使用 getElementsByClass 顾名思义，您会得到一个数组，其中包含该类的所有元素。 [元素1，元素2] 现在使用 [ ] 运算符选择您要更新的那个

【讨论】：

欢迎来到 StackOverflow。请注意内容的错别字和组织。最好阅读how to answer

【解决方案3】：

我不会告诉你 ID 必须是唯一的。我觉得这片土地已经被其他人覆盖了，他们是对的。也就是说，尝试这样的事情：

<html>

    <img src="https://img.icons8.com/wired/64/000000/bookmark-ribbon.png" id="img1" 
        onclick="replaceImage(this)"/>
    <img src="https://img.icons8.com/wired/64/000000/bookmark-ribbon.png" id="img1" 
        onclick="replaceImage(this)"/>

    <script>
        function replaceImage(e){
            e.src = "https://img.icons8.com/dusk/64/000000/bookmark-ribbon.png";            
        }
    </script>

<html>

【讨论】：