在 Javascript 中转换 NaN 值时出现问题

Question

我刚开始学习 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>

Answer 1

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

parseInt(circle.value, null);

Answer 2

我已经测试了你的代码，可以在函数内部获取输入值。我修改了代码并且对我来说工作正常。您可能还想使用数字输入类型来避免解析。如果是字符串数字，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>

Answer 3

确保您从 id="rCircle"

的输入中获得正确的值

Answer 4

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>

Answer 5

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

重要的是你如何绑定你的 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>

在 Javascript 中转换 NaN 值时出现问题

Problems converting a NaN value in Javascript

javascript

nan

parseint