时间戳

首页 > 解决方案 > JS 新手：如何在 HTML 文档中正确调用递归函数？

javascript - JS 新手：如何在 HTML 文档中正确调用递归函数？

问题描述

我对在这个 HTML 文档中正确调用函数有点困惑。我究竟做错了什么？该函数应返回介于 1 和输入字段中输入的任何数字之间的所有数字的总和，但返回的是 NaN。如何将函数的返回值分配并显示到禁用的输入字段？ 

<!DOCTYPE html>
<html lang="en">
<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>

标签： javascriptrecursion

解决方案

目前，您的函数没有显式返回任何值，因此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>

推荐阅读