以Javascript显示与按钮相对应的图像

Displaying images in Javascript corresponding to buttons

本文关键字：图像 相对 按钮 Javascript 显示      更新时间：2023-12-17

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

必须使用纯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变量，并让按钮修改图像的来源。它运行良好。

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

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。

当前每次单击都会添加新元素。相反，需要发生的是，在已经创建图像的情况下，图像应该发生更改。您可以使用以下函数来完成此操作。

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的图像。如果找不到，则会创建该图像。定位图像后，将应用其属性和样式。只需使用正确的参数调用此函数即可。这样就不需要2个函数。

相关文章：