Как изменить текст заголовка с возвратом функции в 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. Вы использовали int, который не является частью javascript.

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

2. Вы пытаетесь установить value из элемента h1 в то время как вы должны установить innerHTML

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

3. Вам нужно установить id первый в <textarea>, прежде чем пытаться получить его.

4. Вы на самом деле нужно parseinteger от array из string перед добавлением.

   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. Более подробную информацию о parseInt()

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 pass - это значение текстового поля.

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

, чтобы сделать эту работу я также дал текстовую область идентификатор, поэтому он может быть найден с 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>