在 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>