如何用HTML和JavaScript中的函數返回來更改標題文本

Question

我想計算平均值並在點擊計算按鈕後向用戶顯示答案。 我想改變名爲Result的頭部，並返回Calculate_Mean函數，它是平均值var，但它不適用於我，我無法確定哪裏出了問題，有什麼幫助？

function Calculate_Mean() { 
 
      var str = document.getElementById("Num").value; 
 
      var arr = str.split(","); 
 
      var count = arr.length; 
 
      var sum; 
 
    
 
      for (int i = 0; i < arr.length; i++) { 
 
       sum += arr[i]; 
 
      } 
 
    
 
      var mean = sum/count; 
 
    
 
      return mean; 
 
}

<header> 
 
      <h1> Statistical Website </h1> 
 
      <button class="HomeButton" onclick="javascript:window.location.href='HomePage.html'"> Home </button> 
 
     </header> 
 
     <div id="banner"> 
 
      <form action="Script URL" method="GET|POST"> 
 
      <label> 
 
       <h1> Enter the data set </h1> </label> 
 
      <br> 
 
      <textarea name="Num" rows="10" cols="30" autofocus> </textarea> 
 
      <br> 
 
      <button type="button" onclick="document.getElementById ('Result').value = Calculate_Mean()"> Calculate </button> 
 
      <label> 
 
       <h1> The result </h1> </label> 
 
      <label> 
 
       <h1 id="Result"> </h1> </label> 
 
      </form> 
 
     </div>

Answer 1

你的問題是：

1. 您已使用不屬於javascript的int。

   for (int i = 0; i < arr.length; i++) { 
       ^---------- Should be `var` not `int` 
   

2. 您試圖設置一個h1元素的value，而你應該設置innerHTML

   document.getElementById('Result').value=.... 
              ^------------ should be `innerHTML` not `value` 
   

3. 您需要設置id第一至<textarea>設法得到它之前。

4. 你實際上需要parseinteger從string的array前加入。

   var arr = str.split(","); ---> this line will return array of string. 
   .... 
   sum += arr[i]; ----> 'arr[i]' will give string and the result will be concatenated not added. 
   

工作液

的HTML應該是這樣的<form>標籤

<textarea id="Num" rows="10" cols="30" autofocus> </textarea> <!-- Set 'id' not 'name' --> 
<br> 
<button type="button" onclick="document.getElementById("Result").innerHTML=Calculate_Mean();"> Calculate </button> 
<label> 
    <h1> The result </h1> 
</label> 
<label> 
    <h1 id="Result"> </h1> 
</label> 

內的功能應該是這樣的：

function Calculate_Mean() { 
    var str = document.getElementById("Num").value; 
    var arr = str.split(","); // Will return array of string 
    var count = arr.length; 
    var sum=0; 
    for (var i = 0; i < count; i++) { // You had 'int' instead of 'var' 
     sum += parseInt(arr[i]); // Need to parse integer before adding 
    } 
    var mean = sum/count; 
    return mean; 
} 

Answer 2

有你的代碼的多個問題。

1. 刪除int其非js關鍵字。改爲使用var。
2. 而不是value使用innerHTML。 value用於input元件
3. Num定義爲name應（還）是id
4. 使用parseInt()讀取陣列值作爲數字。此外分配的sum初始值爲0更多信息有關​​

function Calculate_Mean() { 
 
     var str = document.getElementById("Num").value; 
 
     var arr = str.split(","); 
 
     var count = arr.length; 
 
     var sum=0; 
 

 
     for (var i = 0; i < arr.length; i++) { 
 
      sum += parseInt(arr[i]); 
 
     } 
 

 
     var mean = sum/count; 
 

 
     return mean; 
 
     }

<div id="banner"> 
 
     <form action="Script URL" method="GET|POST"> 
 
     <label> 
 
      <h1> Enter the data set </h1> </label> 
 
     <br> 
 
     <textarea id="Num" rows="2" cols="30" autofocus> </textarea> 
 
     <br> 
 
     <button type="button" onclick="document.getElementById ('Result').innerHTML = Calculate_Mean()"> Calculate </button> 
 
     <label> 
 
      <h1> The result </h1> </label> 
 
     <label> 
 
      <h1 id="Result"> </h1> </label> 
 
     </form> 
 
    </div>

jsbin demo

Answer 3

所以我們有一個函數getMean()它只是需要被例如通過串「100,25,30」，它將返回結果h1。在這種情況下，字符串im傳遞是textarea的值。

<button type="button" onclick= "getMean(document.getElementById('data').value)" > 

，使這項工作我也給了文本區域的ID，以便它可以與getElementById()

<textarea id="data"> 

DEMO中找到：https://jsfiddle.net/km6uowq4/4/

 <header> 
      <h1 > Statistical Website </h1> 
      <button class="HomeButton" onclick="javascript:window.location.href='HomePage.html'"> Home </button> 
     </header> 
     <div id = "banner"> 
      <form action="Script URL" method="GET|POST"> 
       <label> 
        <h1> Enter the data set </h1> 
       </label> 
       <br> 
       <textarea id="data" name="Num" rows="10" cols="30" autofocus> </textarea> 
       <br> 
       <button type="button" onclick= "getMean(document.getElementById('data').value)" > Calculate </button> 
       <label> 
        <h1 > The result </h1> 
       </label> 
       <label> 
        <h1 id = "Result"> </h1> 
       </label> 
      </form> 
     </div> 

    <script type="text/javascript"> 

     function getMean(csv_string){ 
     var arr = csv_string.split(','); 
     var total = 0; 
     for(var i = 0; i < arr.length; i++) { 
      total = total + parseInt(arr[i],10); 
     } 
     var avg = total/arr.length; 
     document.getElementById("Result").innerHTML=avg; 
     } 

    </script>