javascript - 如何通过返回 HTML 和 JavaScript 中的函数来更改标题文本

Question

我想计算平均值并在用户单击计算按钮后向其显示答案。 我想通过返回 Calculate_Mean 函数(即均值 var)来更改名为 Result 的 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

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

1. 删除 int 不是 js 关键字。请改用 var。
2. 使用 innerHTML 而不是 value。 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