制作js温度计

Question

我正在用JS制作这个温度计，你可以在表格中写下温度的等级，点击按钮后，一个函数会显示一个图像。我想在更改表单中的数据并再次单击按钮后更改图像，但我的代码似乎不起作用

我尝试用简单的JS来做这件事，因为我想一步一步地理解这个过程(我不是出于需要而做一个温度计，而是作为一个练习)

let imgaparecio = true;
console.log(imgaparecio);

function getValue() {
    var kelv = document.getElementById("kelvin");
    var cel = document.getElementById("celsius");
    var fah = document.getElementById("fahrenheit");
    var ik;
    var ic;
    var ifh;
    if (imgaparecio) {
        ik = document.createElement("IMG");
        ik.style.width = "40%";
        ik.style["max-height"] = "380px";
        ik.style["min-height"] = "380px";
        ik.style["object-position"] = "center";
        kelv.appendChild(ik);

        console.log("first time activated");
        return [ik, ic, ifh, imgaparecio = false];
    } else {
        console.log("this is activated already");
    }

    var cambio = document.getElementById("wrote").value;
    var kelvin = Math.floor(cambio);
    var celsius = kelvin - 273;
    var fahrenheit = Math.floor(celsius * (9 / 5) + 32);

    if (kelvin <= 0 && kelvin < 200) {
        ik.setAttribute("src", "./img/zero.png");
    } else if (kelvin >= 200 && kelvin < 400) {
        ik.setAttribute("src", "./img/twofive.png");
    } else if (kelvin >= 400 && kelvin < 600) {
        ik.setAttribute("src", "./img/fifty.png");
    } else if (kelvin >= 600 && kelvin < 800) {
        ik.setAttribute("src", "./img/sevenfive.png");
    } else {
        ik.setAttribute("src", "./img/fullter.png");
    }
}

Answer 1

您使用的保存图像的变量ik在getValue()中声明，使其成为局部变量。当您第二次运行getValue()时，您将跳过创建新映像的块。这使得ik未定义，因此设置其源的代码将失败。

如果将var ik;行从getValue()移到let imgaparecio = true;声明旁边的全局作用域中，它应该可以工作。