如何使用 HTML 和 JavaScript 中函数的 return 更改 header 文本

Question

我想计算平均值并在用户单击计算按钮后向其显示答案。我想用 Calculate_Mean 函数的 return 更改 header 调用的结果，这是平均变量，但它对我不起作用，我不知道出了什么问题, 有帮助吗？

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

您的代码中存在多个问题。

删除int its not js 关键字。请改用 var。
而不是 value 使用 innerHTML。 value 用于 input 个元素
Num 被定义为 name 它应该（也）是 id
使用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 2

所以我们有一个函数 getMean() 它只需要传递字符串，例如"100,25,30" 并且它将 return 结果变为结果 h1。在这种情况下，我传递的字符串是文本区域的值。

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

为了完成这项工作，我还为文本区域提供了一个 ID，以便可以通过 getElementById()

找到它

<textarea id="data">

演示：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>

Answer 3

您的问题是：

您使用了不属于 javascript 的 int。

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

您正在尝试设置 h1 元素的 value 而您应该设置 innerHTML

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

您需要先将 id 设置为 <textarea>，然后再尝试获取它。
```
<textarea name="Num"..... ---> should be id="Num"
```

你实际上需要从 string 的 array parse integer 添加之前。

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;
}

如何使用 HTML 和 JavaScript 中函数的 return 更改 header 文本

How to change a header text with the return of a function in HTML and JavaScript

html

javascript

web-deployment