新手JS：如何正确调用HTML文档中的递归函数？
我在这个HTML文档中正确调用函数时有点困惑。我究竟做错了什么？该函数应返回1和输入字段中输入的任何数字之间的所有数字之和，但返回NaN。如何将函数的返回值分配并显示到禁用的输入字段？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Recursion</title>
<script>
let recursiveSum = (num) => {
if (num === 1) {
return 1;
} else {
return num + recursiveSum(num-1);
}
}
</script>
</head>
<body>
<h1>Find the sum of 1 to some number!</h1>
<form id="myForm" name="myForm">
<input type="number" id="numInput" name="numInput" placeholder="Enter a positive number here" autofocus>
<input type="text" id="sum" name="sum" disabled>
<button type="button" onclick="recursiveSum(this.form.numInput.value);">Calculate! </button>
</form>
</body>
</html>
蝴蝶刀刀浏览 655回答 2
2回答
-
凤凰求蛊
目前，您的函数没有显式返回任何值，因此undefined隐式返回函数。value在每个递归调用中设置也没有任何意义。您应该在所有递归的结果之后设置值。const elm = document.getElementById("sum")function btnClick(num){ let recursiveSum = (num) => { if(num === 1) return 1; return num+recursiveSum(num-1) } elm.value = recursiveSum(+num)}<h1>Find the sum of 1 to some number!</h1><form id="myForm" name="myForm"> <input type="number" id="numInput" name="numInput" placeholder="Enter a positive number here" autofocus> <input type="text" id="sum" name="sum" disabled> <button type="button" onclick="btnClick(this.form.numInput.value);">Calculate! </button></form> -
湖上湖
您需要将计算与显示值分开，以便正确计算总和。一旦得到总和，显示它很容易。let recursiveSum = (num) => { if (num === 1) { return 1; } else { return num + recursiveSum(num - 1); }}let showSum = (num) => { document.getElementById("sum").value = recursiveSum(num);}<h1>Find the sum of 1 to some number!</h1><form id="myForm" name="myForm"> <input type="number" id="numInput" name="numInput" placeholder="Enter a positive number here" autofocus> <input type="text" id="sum" name="sum" disabled> <button type="button" onclick="showSum(parseInt(this.form.numInput.value));">Calculate! </button></form>
随时随地看视频慕课网APP
相关分类
JavaScript