当我使用 innerHTML 时，文本输入显示 Nan

Question

出于某种原因，我在这里没有得到 output：

Javascript

var num1 = document.getElementById('number-1').value;
var number1 = parseFloat(num1);
var result = document.getElementById('results');
function generateAddition(){
    result.innerHTML = number1 + number1;
    result.style.backgroundColor = "lightgrey";
}

HTML

<span id="results"></span>
<input type="number" class="form-control" name="number-1" id="number-1">
<button type="button" onclick="generateAddition()">add</button>

Answer 1

您必须在 function 调用中获取输入字段的值！

 var result = document.getElementById('results'); function generateAddition(){ var num1 = document.getElementById('number-1').value; var number1 = parseFloat(num1); result.innerHTML = number1 + number1; result.style.backgroundColor = "lightgrey"; }

 <span id="results"></span> <input type="text" class="form-control" name="number-1" id="number-1"> <button type="button" onclick="generateAddition()">add</button>

Answer 2

这里的问题是generateAddition正在捕获初始值而不是 dom object 本身。 初始值为空字符串（ Nan ）。 只需捕获元素本身并继续获取generateAddition function 中的元素值。

var num1 = document.getElementById('number-1');
var result = document.getElementById('results');

function generateAddition() {

    var number1 = parseFloat(num1.value);
    result.innerHTML = number1 + number1;
    result.style.backgroundColor = "lightgrey";
}

Answer 3

我希望这有帮助。 现在您可以使用num1作为全局变量并在 function 调用时获取/加载它的值！

 var num1 = document.getElementById('number-1'); var result = document.getElementById('results'); function generateAddition(){ var number1 = parseFloat(num1.value); result.innerHTML = number1 + number1; result.style.backgroundColor = "lightgrey"; }

 <span id="results"></span> <input type="text" class="form-control" name="number-1" id="number-1"> <button type="button" onclick="generateAddition()">add</button>