当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - JS | Receiving NaN as output when trying to pull content from text input

问题描述:

I'm new to JS and having trouble parseing text input into a calculation function. I must be doing something fundamentally wrong as I know the actual parse method is correct. I've been trying a bunch of different things but am kind of running around in circles at this point. I'm just making a simple celius/farenheit converter. Any help is greatly appreciated!

NOTE I'm trying to use pure JS only

<body>

<h2>Temperature Converter</h2>

<form>

<input id="degrees" type="text" size="5">

<input type="radio" value="celsius" name="one" id="celsius">Celsius

<input type="radio" value="farenheit" name="one" id="farenheit">Farenheit

<button id="equals" type="button">=</button>

<output id="output">

</form>

<script type="text/javascript" src="js/script2.js"></script>

</body>

var val = parseFloat(document.querySelector("#degrees").value);

var output = document.getElementById("output");

window.addEventListener("load", main);

function main() {

// listen for a click on the "equals" button

document.querySelector("#equals").addEventListener(

"click", function(){convert("val");});

}

function convert(val) {

var c = document.getElementById("celsius");

var f = document.getElementById("farenheit");

if (c.checked) {

toFarenheit(val);

console.log("celsius selected");

} else if (f.checked) {

toCelsius(val);

console.log("farenheit selected");

} else {

console.log("Select whether input is in celsius or farenheit.");

}

}

function toCelsius(val) {

output.value = (val - 32) / 1.8;

console.log(output.value);

}

function toFarenheit(val) {

output.value = val * 1.8 + 32;

console.log(output.value);

}

网友答案:

At this point

convert("val");

you give your convert() function the strings "val" to be used for conversion and not the variable. This leads to the NaN value in the computation later on.

You should move the line, where you retrieve the value val to inside the convert() function, so it will get updated upon the click. Currently you read the value just at startup (where it will most probably be empty) and never update it.

function convert() {
    var c = document.getElementById("celsius");
    var f = document.getElementById("farenheit");
    var val = parseFloat(document.querySelector("#degrees").value);

    if (c.checked) {
        toFarenheit(val);
        console.log("celsius selected");

    } else if (f.checked) {
        toCelsius(val);
        console.log("farenheit selected");

    } else {
        console.log("Select whether input is in celsius or farenheit.");
    }
}
网友答案:

Here is error

     document.querySelector("#equals").addEventListener(
    "click", function(){convert("val");}); 

Nedd

     document.querySelector("#equals").addEventListener(
    "click", function(){convert(val);}); 
网友答案:

Yip the first commenter to your answer was on the nose. You need to update your val variable on click. You can declare it up top and then update it in the function call, or just create it as a scoped variable in the click listener.

Working fiddle: https://jsfiddle.net/6s5nx7dn/

分享给朋友:
您可能感兴趣的文章:
随机阅读: