在 HTML 文档中显示循环函数的正确语法

Question

我有点不明白为什么这段代码没有显示任何东西，它曾经在我没有按钮的包装函数并且我在脚本中手动输入 factorialize 函数的参数时工作，我在做什么错误的？

HTML

<div class="factorializing">

  <h1> Factorialize a number </h1>

    <input type ="text" id ="number"/>
    <button id="factButton"> Factorialize</button>

  <h1 id="factorialized"> </h1>

</div>

Javascript

document.getElementById("factButton").addEventListener("click", function(){

 function factorialize() {
   var input = document.getElementById("number").value;
   var output = document.getElementById("factorialized");

if (input === 0) {
   return output.innerHTML =  1;
}

else {
   return output.innerHTML = input * factorialize(input - 1) ;
}            
}
 });

Answer 1

我认为您正在寻找这样的东西：-

 document.getElementById("factButton").addEventListener("click", function() { var input = document.getElementById("number").value; var output = document.getElementById("factorialized"); function factorialize(input) { if (input === 0) { return 1; } else { return input * factorialize(input - 1); } } output.innerHTML = factorialize(input); });

 <div class="factorializing"> <h1> Factorialize a number </h1> <input type="text" id="number" /> <button id="factButton">Factorialize</button> <h1 id="factorialized"> </h1> </div>

这将递归调用您的factorialize函数并设置输出。

Answer 2

 document.getElementById("factButton").addEventListener("click", function() { var input = parseInt(document.getElementById("number").value, 10); document.getElementById("factorialized").innerHTML = factorialize(input); }); function factorialize(n) { return (n <= 0) ? 1 : n * factorialize(n - 1); }

 <div class="factorializing"> <h1> Factorialize a number </h1> <input type="text" id="number" /> <button id="factButton">Factorialize</button> <h1 id="factorialized"> </h1> </div>

Answer 3

我只会在每次递归调用时将值写入输出，同时更改值。

 document.getElementById("factButton").addEventListener("click", function() { var input = document.getElementById("number").value; var output = document.getElementById("factorialized"); output.innerHTML = '' factorialize(Number(input)) function factorialize(input) { return output.innerHTML += '' + ((input === 0) ? 1 : (input * factorialize(input - 1))) } });

 <div class="factorializing"> <h1> Factorialize a number </h1> <input type="text" id="number" /> <button id="factButton">Factorialize</button> <h1 id="factorialized"> </h1> </div>