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)。此外，我一直在控制台中获取NaN，除非代码包含在window.onload函数中。

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

*编辑

这是我的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

您是否尝试过使用第二个param＆＃34; null＆＃34;？

的parseInt

parseInt(circle.value, null);

Answer 2

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

Public Type StdCheckAttribs
    Description As String
    Length As Double
    EndOption As String
End Type

Const CEN56E1_TYPE1_4980_CHECK As StdCheckAttribs = (...instantiation goes here...)

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

正如你所说的那样，你的代码在包装let myArr = [3, 4, 5, 6]; for (let i = myArr.length - 1; i >= 0; i--) { console.log(myArr[i]); // execute this console.log every 200ms. (not 200 MS after the last one.) }后工作正常，这意味着在正常情况下，在你调用window.onload之前没有完成DOM加载。

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

document.getElementById("rCircle")

或者您可以手动调用该函数，如果您的DOM将完成加载 -

HTML代码

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
}

JS代码

<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>

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

5 个答案: