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;声明旁边的全局范围内，它应该可以工作。

制作JS温度计

1 个答案: