如何为每个submit按钮的onclick创建函数？点击按钮提示函数未定义

问题描述 #

尝试为每个submit按钮创建对应运算函数：第一个实现求和，第二个实现减法，第三个实现除法，第四个实现乘法。但点击id为soma的按钮时，控制台提示somar()不是函数，明明已经创建了相关函数。

原代码 #

HTML代码

<form action="" id="form">
  <input type="number" name="campo1" id="campo1">
  <input type="number" name="campo2" id="campo2">
  <input type="submit" value="soma" id="soma" onclick="somar()">
  <input type="submit" value="subtração" id="sub" onclick="sub()">
  <input type="submit" value="divisão" id="divi" onclick="divi()">
  <input type="submit" value="multiplicação" id="multip" onclick="multip()">
  <div class="resultado">
  </div>
</form>

JavaScript代码

const formHtml = document.querySelector('#form');
const campo1 = document.querySelector('#campo1');
const campo2 = document.querySelector('#campo2')
const resultado = document.querySelector('.resultado');
const num1 = Number(campo1.value);
const num2 = Number(campo2.value);

formHtml.addEventListener('submit', function(e) {
  e.preventDefault();
  const soma = document.querySelector('#soma');
  soma.onclick() = function somar() {
    const somando = num1 + num2;
    resultado.innerHTML += `A soma foi ${somando}`;
  }
  const sub = document.querySelector('#sub');
  sub.onclick() = function sub() {
    const subtraindo = num1 - num2;
    resultado.innerHTML += `A subtração foi ${subtraindo}`;
  }
  const divi = document.querySelector('#divi');
  divi.onclick() = function divi() {
    const dividindo = num1 / num2;
    resultado.innerHTML += `A divisão foi ${dividindo}`;
  }
  const multip = document.querySelector('#multip');
  multip.onclick() = function multip() {
    const multiplicando = num1 * num2;
    resultado.innerHTML += `A multiplicação foi ${multiplicando}`;
  }
});

错误原因 #

1. 函数作用域不匹配：somar()等函数被定义在form的submit事件回调内部，属于局部函数，而HTML中onclick="somar()"调用的是全局作用域下的函数，因此找不到该函数，触发报错。
2. 事件绑定语法错误：soma.onclick() = function...是错误写法，加括号会直接执行函数而非绑定事件，正确写法应为soma.onclick = function...。
3. 数值获取时机错误：页面加载时就获取输入框的value，此时输入框为空，得到的数值都是0，无法使用用户后续输入的内容进行计算。
4. submit按钮的逻辑冲突：所有按钮都是submit类型，点击会触发form的submit事件，即使阻止默认行为，也会导致逻辑混乱，不利于单独绑定按钮事件。

修正后的代码 #

HTML代码 #

<form action="" id="form">
  <input type="number" name="campo1" id="campo1">
  <input type="number" name="campo2" id="campo2">
  <button type="button" id="soma">soma</button>
  <button type="button" id="sub">subtração</button>
  <button type="button" id="divi">divisão</button>
  <button type="button" id="multip">multiplicação</button>
  <div class="resultado">
  </div>
</form>

JavaScript代码 #

const campo1 = document.querySelector('#campo1');
const campo2 = document.querySelector('#campo2');
const resultado = document.querySelector('.resultado');

// 封装获取当前输入值的工具函数
function getCurrentValues() {
  return {
    num1: Number(campo1.value),
    num2: Number(campo2.value)
  };
}

// 为求和按钮绑定事件
document.querySelector('#soma').addEventListener('click', () => {
  const { num1, num2 } = getCurrentValues();
  resultado.innerHTML += `A soma foi ${num1 + num2}<br>`;
});

// 为减法按钮绑定事件
document.querySelector('#sub').addEventListener('click', () => {
  const { num1, num2 } = getCurrentValues();
  resultado.innerHTML += `A subtração foi ${num1 - num2}<br>`;
});

// 为除法按钮绑定事件，增加零值判断
document.querySelector('#divi').addEventListener('click', () => {
  const { num1, num2 } = getCurrentValues();
  if (num2 === 0) {
    resultado.innerHTML += 'Erro: Não pode dividir por zero<br>';
    return;
  }
  resultado.innerHTML += `A divisão foi ${num1 / num2}<br>`;
});

// 为乘法按钮绑定事件
document.querySelector('#multip').addEventListener('click', () => {
  const { num1, num2 } = getCurrentValues();
  resultado.innerHTML += `A multiplicação foi ${num1 * num2}<br>`;
});

修正说明 #

• 将submit按钮改为button类型，避免触发表单提交逻辑，简化事件绑定。
• 直接为每个按钮绑定点击事件，确保函数在正确的作用域下执行。
• 点击按钮时才获取输入框的当前值，保证计算使用的是用户最新输入的内容。
• 增加除法运算的零值判断，避免出现除以零的报错。

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