如何为每个 onclick（）输入提交创建一个函数？-解网

问：

我尝试为每个输入提交创建一个函数。第一个输入用于求和，第二个输入用于减法、三除法和第四次乘法。当我点击输入（id=“soma”）时，控制台显示soma（）不是一个函数，但我确实创建了一个函数soma（）;请参阅下面的代码：

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}`;
  }
});

<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 函数输入 onclick addeventlistener

0赞 mykaf 6/21/2023

你的语法不太对。定义函数（然后使用赋值函数（或匿名定义函数（soma.onclick() = function somar() {function somar() {...}soma.addEventListener("click",somar)soma.addEventListener("click",function() {...});

0赞 epascarello 6/21/2023

const num1 = Number(campo1.value); const num2 = Number(campo2.value);是页面运行时，而不是单击按钮时。因此，如果您更改值，它不会获得更新的值。真的不清楚为什么要在 submit 事件中绑定事件处理程序。目的是什么？

答：

0赞 54ka 6/21/2023 #1

事件侦听器使用 addEventListener 单独附加到每个按钮。在每个事件侦听器中，将检索 campo1 和 campo2 的值，并执行相应的计算。通过将所需的文本分配给 innerHTML 属性，直接在 div 中更新结果。.resultado

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

document.querySelector('#soma').addEventListener('click', function () {
    const num1 = Number(campo1.value);
    const num2 = Number(campo2.value);
    const somando = num1 + num2;
    resultado.innerHTML = `A soma foi ${somando}`;
});

document.querySelector('#sub').addEventListener('click', function () {
    const num1 = Number(campo1.value);
    const num2 = Number(campo2.value);
    const subtraindo = num1 - num2;
    resultado.innerHTML = `A subtração foi ${subtraindo}`;
});

document.querySelector('#divi').addEventListener('click', function () {
    const num1 = Number(campo1.value);
    const num2 = Number(campo2.value);
    const dividindo = num1 / num2;
    resultado.innerHTML = `A divisão foi ${dividindo}`;
});

document.querySelector('#multip').addEventListener('click', function () {
    const num1 = Number(campo1.value);
    const num2 = Number(campo2.value);
    const multiplicando = num1 * num2;
    resultado.innerHTML = `A multiplicação foi ${multiplicando}`;
});

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

0赞 Isadora Barbatto 6/22/2023

完美，非常感谢！

0赞 Chris G 6/21/2023 #2

您不需要为每个按钮创建一个函数，只需使用 querySelectorAll 获取所有按钮，然后遍历每个元素并使用 addEventListener 到每个元素。type=button

单击按钮后，您可以执行此操作，它将打印单击的按钮的 ID，这就是您知道要执行哪个操作的方式console.log(op.id)switch/case

const resultado = document.querySelector('.resultado');
const operations = document.querySelectorAll('[type=button]');
operations.forEach(op => {
  op.addEventListener('click', function() {
    const num1 = Number(document.querySelector('#campo1').value);
    const num2 = Number(document.querySelector('#campo2').value);
    switch (op.id) {
      case "soma":
        //console.log("soma")
        const somando = num1 + num2;
        resultado.innerHTML = `A soma foi ${somando}`;
        break;
      case "sub":
        //console.log("subtração")
        const subtraindo = num1 - num2;
        resultado.innerHTML = `A subtração foi ${subtraindo}`;
        break;
      case "multip":
        //console.log("multiplicação")
        const multiplicando = num1 * num2;
        resultado.innerHTML = `A multiplicação foi ${multiplicando}`;
        break;
      case "divi":
        //console.log("divisão")
        const dividindo = num1 / num2;
        resultado.innerHTML = `A divisão foi ${dividindo}`;
        break;

    }
  })
})

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

1赞 Ardit Mirashi 6/21/2023 #3

为了尽可能保持代码的简洁，一个非常聪明的方法是为每个按钮分配一个 id，该 id 与您要用于该按钮的函数的名称相匹配。

然后我们可以很容易地为每次按钮点击使用适当的功能。

const resultado = document.querySelector('.resultado');
const buttons = document.querySelectorAll('[type=button]');

const mathFunctions = {
  soma: (num1, num2) => `A soma foi ${num1 + num2}`,
  sub: (num1, num2) => `A subtração foi ${num1 - num2}`,
  multip: (num1, num2) => `A multiplicação foi ${num1 * num2}`,
  divi: (num1, num2) => `A divisão foi ${num1 / num2}`
}

buttons.forEach(button => {
  button.addEventListener('click', function() {
    const num1 = Number(document.querySelector('#campo1').value);
    const num2 = Number(document.querySelector('#campo2').value);

    const mathFunction = mathFunctions[button.id];
    const resultText = mathFunction(num1, num2);

    resultado.innerHtml = resultText;
  })
})

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

0赞 chrwahl 6/24/2023 #4

可以使用 submitter 属性获取执行 submit 事件的按钮。

在处理表单时，请使用 name 属性而不是 id 属性。名称不必在整个文档中是唯一的，当您知道表单的上下文以获取正确的输入元素时，这非常方便。

document.forms.form01.addEventListener('submit', function(e) {
  e.preventDefault();
  let resultado = e.target.resultado;
  let campo1 = Number(e.target.campo1.value);
  let campo2 = Number(e.target.campo2.value);
  // switch based on the name of the clicked button
  switch(e.submitter.name){
    case 'soma':
      resultado.value = campo1 + campo2;
      break;
    case 'subtração':
      resultado.value = campo1 - campo2;
      break;
    case 'divisão':
      resultado.value = campo1 / campo2;
      break;
    case 'multiplicação':
      resultado.value = campo1 * campo2;
      break;
  }
});

<form action="" name="form01">
  <input type="number" name="campo1">
  <input type="number" name="campo2">
  <button name="soma">soma</button>
  <button name="subtração">subtração</button>
  <button name="divisão">divisão</button>
  <button name="multiplicação">multiplicação</button>
  <br>
  <output name="resultado"></output>
</form>

上一个：将具有多个输入参数的函数应用于矢量

下一个：当我将值放入表格中时，如何立即更新总数

如何为每个 onclick（）输入提交创建一个函数？

how do I create a function for each onclick() input submit?

评论

评论

如何为每个 onclick（） 输入提交创建一个函数？

how do I create a function for each onclick() input submit?

评论

评论

如何为每个 onclick（）输入提交创建一个函数？