在 Javascript 中转换 NaN 值的问题答案

【问题标题】：Problems converting a NaN value in Javascript在 Javascript 中转换 NaN 值的问题
【发布时间】：2017-10-23 00:12:24
【问题描述】：

我刚开始学习 Javascript，我的第一个项目是构建一个网站，该网站从输入框中获取值并使用它们来获取圆的面积，但结果我一直得到 NaN

我的代码如下所示：

let circle = document.getElementById("rCircle");
let radius = circle.value;
const calcAreaCircle = (radius) => {
    let circleResult = Math.PI * Math.pow(radius, 2);
    circleArea.innerHTML = ("The area is: " + circleResult)
};

附加信息 - 我已经尝试使用 parseInt 将 NaN 转换为 let radius = parseInt(circle.value)。此外，除非代码包含在 window.onload 函数中，否则我会在控制台中不断收到 NaN。

有人知道我错过了什么吗？

*编辑

这是我的 html 的一部分

<div class="imageContainer">
    <h4>Circles</h4>
    <div class="Figures"><img src="assets/circle-shape-outline.png" alt="Circle image"></div>
    <div class="text">
      <p>Tell me the radius</p>
      <input type="number" name="" value="" placeholder="Raduis" id="rCircle">
      <button id="calcCircle">Get area</button>
    </div>
    <p id="circleArea"></p>
</div>

【问题讨论】：

什么是圆和 id 为 rCIrcle 的元素？
@Hector 你能也展示你的 HTML 部分吗
@Misaz id 为 rCircle 的元素是一个带有 type=number 的 html 输入标签，而 circle 是我试图存储它的变量
请分享您的 HTML
console.log(circle.value) 并告诉我们它是什么，我假设它不是数字值

标签： javascript nan parseint

【解决方案1】：

function check() {
    let circle = document.getElementById("rCircle");
    let circleArea = document.getElementById("circleArea");
    let radius = circle.value;
    let circleResult = Math.PI * Math.pow(parseInt(radius), 2);
    circleArea.innerHTML = ("The area is: " + circleResult)
}

<div class="imageContainer">
    <h4>Circles</h4>
    <div class="Figures"><img src="assets/circle-shape-outline.png" alt="Circle image"></div>
    <div class="text">
      <p>Tell me the radius</p>
      <input type="number" name="" value="" placeholder="Raduis" id="rCircle">
      <button id="calcCircle" onclick="check()">Get area</button>
    </div>
    <p id="circleArea"></p>
</div>

【讨论】：

我认为这是最接近我的代码的答案，这很完美！非常感谢

【解决方案2】：

您是否尝试过使用第二个参数“null”的 parseInt？

parseInt(circle.value, null);

【讨论】：

【解决方案3】：

我已经测试了您的代码，输入值可以在函数内部获取。我已经修改了代码并且对我来说工作正常。您可能还想使用数字输入类型来避免解析。如果是字符串数字，javascript 会自动将其转换为数字。您可以通过删除解析来检查。

<!Doctype HTML>
<html>
<body>
Enter Value: <input type="number" id='rCircle'>&nbsp
<button onclick="calcAreaCircle()">Calculate</button>
<br/>
<br/>
<span id="circleArea"></span>
<script>    
    var calcAreaCircle  = function(){
        var circle = document.getElementById("rCircle"),
        circleArea = document.getElementById("circleArea");
        radius = parseInt(circle.value,10);

        console.log(parseInt(circle.value,10));
        console.log(typeof radius+": "+radius);

        var circleResult = Math.PI * Math.pow(radius, 2);
        circleArea.innerHTML = ("The area is: " + circleResult)
    };
</script>
</body>
</html>

【讨论】：

我做了，但它并不令人耳目一新，因为我的帐户是新的
没关系。谢谢！

【解决方案4】：

确保您从id="rCircle" 的输入中获得正确的值

【讨论】：

【解决方案5】：

正如您所说，您的代码在包装 window.onload 后工作正常，这意味着在正常情况下，在您调用 document.getElementById("rCircle") 之前 DOM 加载尚未完成。

重要的是你如何绑定你的 JS 代码。您可以通过以下方式检查输入框的 DOM 加载部分：-

if(document.getElementById("rCircle").length > 0)
{
    // Your JS Code like as 
    // let circle = document.getElementById("rCircle");
    // let radius = circle.value;
    // etc
}
else
{
    // DOM is not loaded , ouu need to wait for DOM loading completion
}

或者您可以手动调用该函数，在这种情况下，您的 DOM 将完成加载 -

HTML 代码

<div class="imageContainer">
    <h4>Circles</h4>
    <div class="Figures"><img src="assets/circle-shape-outline.png" alt="Circle image"></div>
    <div class="text">
      <p>Tell me the radius</p>
      <input type="number" name="" value="" placeholder="Raduis" id="rCircle">
      <button id="calcCircle" onClick="getArea()">Get area</button>
    </div>
    <p id="circleArea"></p>
</div>

JS 代码

<script>    
    function getArea(){
        var circle = document.getElementById("rCircle"),
        circleArea = document.getElementById("circleArea");
        radius = parseInt(circle.value);
        var circleResult = Math.PI * Math.pow(radius, 2);
        circleArea.innerHTML = ("The area is: " + circleResult)
    };
</script>

【讨论】：

嘿，这是一个非常聪明的检查 DOM 加载的方法。您的代码可以在 codepen 上完美运行，但由于某种原因，我无法让它与我的代码一起使用。我想我必须重写它... 将 JS 放在 html 中还是在另一个文档中更好？？
可以将JS写在一个JS文件中，使用script标签添加。你还需要我的帮助吗？
我非常感谢你的帮助 deepak 但别担心 :) 谢谢