如何在单击其他照片时显示照片？Javascript、DOM

我有一个任务，当我点击另一张照片时，我需要使一张照片出现。我需要将每个图像放入一个数组中，并在单击相应的照片时调用它。当我点击另一张照片时，我需要删除现有的照片并替换为另一张。我需要用Javascript和DOM来完成。我不确定我到底要怎么做。以下是我目前的代码：

var photoDiv = getElementById("photos");
    document.getElementById("0").addEventListener("click", function () {
        var img = createElement("img");
        photoDiv.appendChild(img);
    })

---

我知道这是完全错误的，但我不知道如何修复它：（

您必须添加图像的图像源

在这一行之后：

var img = document.createElement("img");
img.src = 'pathto/yourimg.png_or_jpg'; // You need this.

---

另外，使用document.getElementById（）（或放置父对象）而不仅仅是getElementById（），这始终是一个好的做法。

除了创建新图像，您还可以只替换图像元素的src，类似于这样：

// get the image
var imgElement = document.getElementById("myImage");

// add the listener
imgElement.addEventListener("click",
  function () {
    // update the src of the image
    imgElement.src = "https://www.w3schools.com/html/img_girl.jpg";
});

---

除此之外，您不应该创建新元素并将其附加到DOM元素。

在没有看到html的情况下，我会说

document.getElementById（“0”）

似乎可疑。请将相关html添加到您的问题中。请看一个如何使用

Image

API创建图像元素并附加它的示例。