Question

我正在尝试使用HTML和JavaScript创建一个基本的平均计算器。我在HTML中有输入字段和按钮，在JavaScript中有平均和重置功能。我找不到我的问题所在。

HTML代码：

<section class="script">
  <script src="avg.js"></script>
  <input type="number" id="inputVal" placeholder="Input Value..."></number><br>
  <button id="Btn_Avg" onclick="AddFunc(inputVal.Value)">Average</button>
  <button id="Btn_Rst" onclick="ResetFunc()">Reset</button>
  <p>Average: </p><p id="average">OK</p>
</section>

JavaScript脚本（avg.js）：

global var count = 0;
global var total = 0;
global var avg = 0;
global var result = document.getElementById("average");
result.textContent = 0;

function AddFunc(value){
  total += value;
  count += 1;
  avg = total / count;
  result.innerHTML = '' + avg;
}

function ResetFunc() {
  total = 0;
  count = 0;
  avg = 0;
  result.innerHTML = '0';
}

Answer 1

好吧，它应该是inputVal.value（小写的value）。那应该正确地将输入值传递给函数。但是您的问题并不能真正描述您遇到的问题，因此我不确定这是否能回答您的问题。

我也不认为global是JavaScript的有效关键字。

Answer 2

问题出在这部分onclick="AddFunc(inputVal.Value)"中。这不会将inputVal的值传递给函数。您应该将<input>元素存储在变量中，并使用较小的v即value

来访问其值

var count = 0;
var total = 0;
var avg = 0;
var result = document.getElementById("average");
var input = document.getElementById('inputVal')
result.textContent = 0;

function AddFunc(e){
  let value = Number(input.value);
  total += value;
  count += 1;
  avg = total / count;
  result.innerHTML = '' + avg;
}

function ResetFunc() {
  total = 0;
  count = 0;
  avg = 0;
  result.innerHTML = '0';
}

<input type="number" id="inputVal" placeholder="Input Value..."></number><br>
  <button id="Btn_Avg" onclick="AddFunc(event)">Average</button>
  <button id="Btn_Rst" onclick="ResetFunc()">Reset</button>
  <p>Average: </p><p id="average">OK</p>

HTML不会从JavaScript脚本更改

2 个答案: