为什么添加document.getElement时fibonacci序列不起作用

Question

我在firstNum和secondNum上添加了document.getElementById，这样用户就可以输入数字，但似乎不起作用。它显示为未定义，其余为NaN。

function fibonacci(){
let firstNum = document.getElementById('firstNums').val;
let secondNum = document.getElementById('secondNums').val;
let result = secondNum;
for(i=0; i < 9; i++) {
document.write(result + '<br/>');

result = firstNum + secondNum;// = 5
firstNum = secondNum;//firstNum is 2 from the secondNum
secondNum = result;//secondNum is 5 from the result and so on...
}
}

Answer 1

值是您需要从输入中获得的，然后因为所有输入都会产生字符串，所以需要将值解析为数字。

下面使用您的代码段中的计算，然后将它们插入到ul中，以便您可以重用输入。

document.getElementById('calculate').addEventListener('click', fibonacci);
function fibonacci(){
let firstNum = parseInt(document.getElementById('firstNums').value, 10);
let secondNum = parseInt(document.getElementById('secondNums').value, 10);
let result = secondNum;
let resultStr = '';
for(i=0; i < 9; i++) {
resultStr += '<li>' + result + '</li>';
result = firstNum + secondNum;
firstNum = secondNum;
secondNum = result;
}
document.getElementById('result').innerHTML = resultStr
}

<input type="text" id="firstNums" placeholder="first number"/>
<input type="text" id="secondNums" placeholder="second number" />
<button type="button" id="calculate">Calculate</button>
<hr/>
<ul id="result"></ul>

Answer 2

您应该使用value属性，该属性设置或返回文本字段的值属性的值。

let firstNum = document.getElementById('firstNums').value;
let secondNum = document.getElementById('secondNums').value;