如何使javascript（包括具有數組和返回值的函數）在單擊按鈕時在div中寫入而無需轉到另一頁

Question

這個問題我有很多問題。 當我console.log(sum); 我得到了所需的答案，但是當我嘗試通過單擊按鈕和輸入字段輸出答案時，它將無法正常工作。 我改變了felt3.innerHTML=addnumber(ttt); 到document.write(addnumber(ttt)); 這使它起作用，但它正在將其發送到另一個頁面，這是我不希望的。 我如何進行這項工作：

<form id="form3">
  Tall:<input type="number" id="number"><br>
  <input type="button" id="button3" value="plusse"><br>
</form>
<div id="felt3"></div>

和：

var number = document.getElementById("number");

var felt3 = document.getElementById("tall3");

var form3 = document.getElementById("form3");

var button3 = document.getElementById("button3");

var sum=0;

function addnumber(x){
  var array = [];
  array.push(x);
  for (var i = 0; i < array.length; i++) {
      sum=sum+array[i];
  }
  return sum;
}

button3.onclick=function(){
  var ttt=Number(number.value);
  felt3.innerHTML=addnumber(ttt);
}

Answer 1

如果我正確理解了您的問題，那么這里的解決方案是更新您要傳遞給getElementById("tall3") ，並將其重寫為document.getElementById("felt3"); 。

這樣做將導致您的腳本獲取對ID為felt3的div元素的引用。 當您執行onclick事件處理程序時， addnumber()的結果將根據需要分配給有效的felt3 DOM引用的innerHTML ：

 var number = document.getElementById("number"); // Update this line to use "felt3" var felt3 = document.getElementById("felt3"); var form3 = document.getElementById("form3"); var button3 = document.getElementById("button3"); var sum=0; function addnumber(x){ var array = []; array.push(x); for (var i = 0; i < array.length; i++) { sum=sum+array[i]; } return sum; } button3.onclick=function(){ var ttt=Number(number.value); // Seeing that felt3 is now a valid reference to // a DOM node, the innerHTML of div with id felt3 // will update when this click event is executed felt3.innerHTML=addnumber(ttt); } 

 <form id="form3"> Tall:<input type="number" id="number"><br> <input type="button" id="button3" value="plusse"><br> </form> <div id="felt3"></div>