HTML/JS代码疑问：为何计算结果未通过alert弹窗显示？

你当前的代码逻辑能正常计算并把结果赋值给output元素，但完全没有调用alert()函数，这就是弹窗不出现的核心原因。

另外还有个隐藏问题：每次点击按钮，都会给表单新增一个submit事件监听器，多次点击后会触发多次计算，属于冗余操作。

修复方案 #

方案1：保留表单提交逻辑，添加alert并避免重复绑定

修改JavaScript代码，添加alert()调用，同时移除重复绑定的问题：

function verify() {
  const multiplyForm = document.querySelector('#multiply-form');
  const product = document.querySelector("#calc-result");

  // 先移除旧的监听器，防止重复绑定
  multiplyForm.removeEventListener('submit', calculateResult);
  // 绑定新的处理函数
  multiplyForm.addEventListener('submit', calculateResult);

  function calculateResult(event) {
    const formData = new FormData(event.target);
    const a = Number(formData.get('a'));
    const b = Number(formData.get('b'));
    const c = Number(formData.get('c'));

    const result = ((a * b) + (b * c)) / (a + b);
    product.value = result;
    // 新增alert弹窗展示结果
    alert(`计算结果：${result}`);
    
    event.preventDefault();
  }
}

方案2：直接在点击事件中处理计算（更简洁）

既然按钮已经绑定了onclick事件，没必要再通过表单submit触发，直接在verify函数内完成计算和弹窗：

function verify() {
  const formData = new FormData(document.querySelector('#multiply-form'));
  const a = Number(formData.get('a'));
  const b = Number(formData.get('b'));
  const c = Number(formData.get('c'));

  const result = ((a * b) + (b * c)) / (a + b);
  document.querySelector("#calc-result").value = result;
  alert(`计算结果：${result}`);
}

同时建议把按钮改成type="button"，避免表单默认提交行为：

<button type="button" onclick="verify()">Verify</button>

内容的提问来源于stack exchange，提问作者skizzDarius