javascript - 如何使用带有事件处理程序的按钮在html中显示函数计算

Question

//area = 1/2 b * h

var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);

function findArea(base, height) {
  var base = document.getElementById("base").value;
  var height = document.getElementById("height").value;

  var area = base * height / 2;
  var result = document.getElementById('result');
  return result.textContent = area;
}

<form>
  <input type="number" id="base">
  <p>Enter base measurement</p>
  <input type="number" id="height">
  <p>Enter height measurement</p>
  <button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>

谁能告诉我为什么返回的计算结果闪烁然后从屏幕上消失？我希望它保留在那里，直到为新一轮输入另一组数字为止——谢谢……

Answer 1

您正在提交表单，表单将执行操作...因此您需要阻止默认表单操作，您可以通过对 html 表单标记使用 event.preventDefault(); 来做到这一点.

只需通过添加以下内容来编辑您的表单标签:onsubmit="event.preventDefault();" 一切都会正常进行。

//area = 1/2 b * h

var btn = document.getElementById("btn");
btn.addEventListener('click', findArea);

function findArea(base, height) {
  var base = document.getElementById("base").value;
  var height = document.getElementById("height").value;

  var area = base * height / 2;
  var result = document.getElementById('result');
  return result.textContent = area;
}

<form onsubmit="event.preventDefault();">
  <input type="number" id="base">
  <p>Enter base measurement</p>
  <input type="number" id="height">
  <p>Enter height measurement</p>
  <button id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>