试图创建转换华氏度和摄氏度的按钮

Question

var typeTemp = document.getElementById("demo3");

document.getElementById("f").addEventListener("click", function(){
    var tValue = parseFloat(typeTemp.value); // allows the number to be functional
    
    document.getElementById("Fanswer").innerHTML = (1.8 * tValue) + 32;
});

document.getElementById("c").addEventListener("click", function(){
    var tValue = parseFloat(typeTemp.value); // allows the number to be functional
    
    document.getElementById("Canswer").innerHTML = 1.8 * (tValue - 32);
});

   <input type="number" id="demo3" class="ex" min=0><br>
        <button id="f">Fahrenheit</button>
        <div id="Fanswer"></div>
        <button id="c">Celsius</button>
        <div id="Canswer"></div>

嗨，我正在尝试使华氏温度和摄氏温度按钮工作，并使答案显示在div中。我检查时没有错误，但我确实得到了两个功能的“NaN”。我不确定为什么这样做:(谢谢。

Answer 1

问题是，当你实际上是一个DOM节点时，你使用typeTemp作为一个值，你应该像这样编辑它：

var typeTemp = document.getElementById("demo3");

document.getElementById("f").addEventListener("click", function(){
    var tValue = parseFloat(typeTemp.value); // allows the number to be functional

    document.getElementById("Fanswer").innerHTML = (1.8 * tValue) + 32;
});

document.getElementById("c").addEventListener("click", function(){
    var tValue = parseFloat(typeTemp.value); // allows the number to be functional

    document.getElementById("Canswer").innerHTML = 1.8 * (tValue - 32);
});

Answer 2

typeTemp是对DOM元素的引用，但是你使用它就好像它是一个字符串（元素的值）。您想使用其.value属性，请参阅***评论：

var typeTemp = document.getElementById("demo3");

document.getElementById("f").addEventListener("click", function(){
    var tValue = parseFloat(typeTemp.value); // ***
    
    document.getElementById("Fanswer").innerHTML = (1.8 * tValue) + 32;
});

document.getElementById("c").addEventListener("click", function(){
    var tValue = parseFloat(typeTemp.value); // ***
    
    document.getElementById("Canswer").innerHTML = 1.8 * (tValue - 32);
});

<input type="number" id="demo3" class="ex"><br>
        <button id="f">Fahrenheit</button>
        <div id="Fanswer"></div>
        <button id="c">Celsius</button>
        <div id="Canswer"></div>

你得到NaN的原因有点复杂，但是：

• parseFloat会试图强迫你给它串起来
• 你给它一个DOM元素
• 当你将DOM元素强制转换为字符串时，通常会得到一个像"[object HTMLInputElement]"这样的字符串
• parseFloat返回NaN，如果它甚至不能转换你给它的字符串的第一部分数字，它不能在"[object HTMLInputElement]"的情况下