Question

if (yardss > 0.1 && yardss < 0.3) {
    var img = document.createElement("img");
    img.src = "images/wrench1.jpg";
    img.align = "center";
    document.body.appendChild(img);
} else if (yardss > 0.3) {
    var img = document.createElement("img");
    img.src = "images/wrench.jpg";
    img.width = 500;
    img.height = 300;
    document.body.appendChild(img);
}

该脚本由用户点击按钮激活，并提示用户输入一定数量的码。如果码数超过一定数量，则显示一定尺寸的扳手。如果低于某个数字，则显示不同尺寸的扳手。我的问题是，因为脚本可以通过单击按钮一遍又一遍地运行，每次运行脚本时，都会在上一个图像下方生成一个新的扳手图像，创建一个非常长的网页图像。

如何让新创建的图像替换先前运行的脚本创建的图像，而不是让页面填充脚本中的图像多次运行？

Answer 1

使用replaceChild代替appendChild。

Answer 2

您只需更改当前图片上的.src属性即可。无需创建全新的图像：

// get the current image object
// assumes you set id="wrenchImg" on it
var img = document.getElementById("wrenchImg");
if (yardss > 0.1 && yardss < 0.3) {
    img.src = "images/wrench1.jpg";
    img.height = ...   // set this to whatever you need it to be for this image
    img.width = ...    // set this to whatever you need it to be for this image
    img.align = "center";
} else if (yardss > 0.3) {
    img.src = "images/wrench.jpg";
    img.height = 300;
    img.width = 500;
    img.align = "left";
}

如果您还必须更改图像的任何其他属性（例如，高度或宽度或对齐），则可以将这些属性添加到if/else的每个分支，但这样做，你必须完全初始化图像对象，因为它可能是基于前一个图像设置的不同方式。

Answer 3

不要一次又一次地创建img元素。只需创建一次并在其上设置一些id即可。然后，只需更改src和width，height等等。

在HTML中：

<img id= "wrench_img"/>                         // Setting id as wrench_img

在JavaScript中：

function changer(yardss) {
    var img1 = document.getElementById("wrench_img"); // Get the img 
    if (yardss > 0.1 && yardss < 0.3) {
        img1.src = "images/wrench1.jpg";              // Change the src
        img1.align = "center";
    } else if (yardss > 0.3) {
        img1.src = "images/wrench.jpg";               // Change the src
        img1.width = 500;                             // Change width
        img1.height = 300;
    }
}

在您的代码中，您要将新图像元素附加到document.body。这就是你获得多个图像元素的原因。但是如果你看一下这段代码，我们就不会多次创建图像元素了。我们只是改变创建的那个。

Online Demo

替换现有元素

3 个答案: