Question

到目前为止，我能够获得一个按钮来创建一个新的图像元素，但这就是它。我需要一个按钮显示一个图像，另一个按钮显示一个不同的图像。所有答案都让我得到的结果只是在第一个下方显示新图像。

必须使用简单的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变量并使用按钮修改图像的来源。它工作正常。

Answer 1

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

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。

Answer 2

您目前正在每次点击添加新元素。需要做的是，在已经创建图像的情况下，图像应该改变。您可以使用以下功能执行此操作。

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个功能。

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

2 个答案: