在Javascript中显示与按钮对应的图像

到目前为止，我能够得到一个按钮来创建一个新的图像元素，但仅此而已。我需要一个按钮显示一个图像，另一个按钮在它的位置显示不同的图像。所有的答案都让我得到了只在第一张图片下方显示新图片的结果

必须是纯Javascript和HTML格式

function f1() {
    var img = document.createElement("img");
    img.setAttribute("src", "test1.png");
    img.setAttribute("width", "256");
    img.setAttribute("height", "256");
    img.setAttribute("alt", "pic");
    document.body.appendChild(x);}

function f2() {
    var img = document.createElement("img");
    img.setAttribute("src", "test2.png");
    img.setAttribute("width", "256");
    img.setAttribute("height", "256");
    img.setAttribute("alt", "pic");
    document.body.appendChild(x);}

每个脚本都绑定到HTML中的onclick按钮上，可以正常工作。我可以让我的图像显示出来，但每次点击按钮都会创建一个新元素，我相信这是由于append语句造成的，但我不知道如何让它显示出来

---

解决方法：在函数外部初始化img变量，并让按钮修改图像源。它很好用

您当前正在通过每次单击添加新元素。相反，需要做的是，如果已经创建了图像，则图像应该更改。您可以使用以下函数来完成此操作

function changeImage(src,width,height,title){
    vid = document.getElementById('changingImage');
    if(!vid){
        vid = document.createElement('img');
        vid.id = changingImage;
        body.appendChild(vid);
    }
    vid.src = src;
    vid.style.width = width;
    vid.style.height = height;
    vid.setAttribute('title',title);
}

---

此函数首先尝试查找具有特定ID的图像。如果未找到该图像，将创建该图像。找到图像后，将应用其属性和样式。只需使用正确的参数调用此函数。这样，您就不需要两个函数。

您可以使用全局变量来测试是否已经创建了其中一个映像，或者在创建映像之前测试映像是否已经存在。全局变量方法可能更快，只需对代码进行少量更改：

var img1 = false;

function f1() {
    if (!img1) {
        img1 = document.createElement("img");
        img1.setAttribute("src", "test1.png");
        img1.setAttribute("width", "256");
        img1.setAttribute("height", "256");
        img1.setAttribute("alt", "pic");
        document.body.appendChild(img1);
    }
}

---

当然，最好只有一个函数这样做（只需将img src作为参数传递，因为它们都做完全相同的事情）。然后，您可以将img变量存储在数组中，或者为创建的图像分配一个ID，然后在再次创建/追加它们之前测试DOM中的该ID。

到目前为止您有什么？请显示您的Javascript/HTML/CSSHi，并欢迎使用Stack Overflow。在这里，我们希望您编写自己的代码。我们将帮助您找出您遇到的问题，但我们不会为您编写。让我们看看你有什么，然后我们可以给你一些建议。我已经添加了我的JS代码，很好地解决了这个问题。有了这个变量，它应该比我描述的更快。不过，我的功能应该是开箱即用的：p。