返回 0 或 NaN 而不是实际结果的值答案

【问题标题】：Value returning 0 or NaN instead of actual result返回 0 或 NaN 而不是实际结果的值
【发布时间】：2018-10-27 07:16:12
【问题描述】：

只是想制作一个简单的重量转换器程序，但结果一直给我 NaN 或 0。我使用基本相同的函数编写了一个类似的计算器，它工作正常，我不确定我在这里缺少什么。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=1, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="weight.js"></script>
    <title>Weight Converter</title>
</head>
<body>

    <div>
        <input id="pounds" type="text" placeholder="Enter weight in pounds"/>
        <input type="button" value="convert" onclick="calc()"/>
    </div>




</body>
</html>

JS：

var k = document.getElementById('pounds').value;


function calc(){
    var result = (k / 2.2);
    alert(result + " kilograms");
    console.log(result);
}

【问题讨论】：

标签： javascript

【解决方案1】：

也许可以尝试这样的事情。等待窗口加载然后运行 calc 函数（因为 Window.load 已被调用，该函数已经有可用的 DOM（例如任何 div ID 或类））

window.onload = function() {
  calc();
};

function calc() {
  let k = document.getElementById('pounds');
  k.addEventListener('click', function () {
    let result = document.getElementById('pounds').value / 2.2;
    alert(result.toFixed(1) + " kilograms");
    console.log(result);
  });
}

【讨论】：

【解决方案2】：

您正在尝试获取.value 之前 onclick 已被触发。在页面加载时，元素的value 是一个空字符串。尝试在点击之后获取值，而不是之前：

function calc() {
  var k = document.getElementById('pounds').value;
  var result = (k / 2.2);
  alert(result + " kilograms");
  console.log(result);
}

<div>
  <input id="pounds" type="text" placeholder="Enter weight in pounds" />
  <input type="button" value="convert" onclick="calc()" />
</div>

【讨论】：