如何使用带有事件处理程序的按钮在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

表单中按钮的默认操作是提交按钮。为按钮指定按钮的属性类型，以防止表单提交：

//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 type="button" id='btn'>Click to find the area of your triangle.</button>
</form>
<p id="result"></p>

Answer 2

您正在提交表单，表单将开始执行操作...因此您需要阻止默认表单操作，您可以通过对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>