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

IsadoraBarbatto
June 20, 2023
292 views
3 votes
3 Answers

I have tried to create a function for each input submit. The first input is for sum, the second for subtraction, third division and fourth multiplication. When I click on input (id="soma"), the console shows that soma() is not a function, but I alreasy created a function soma(); See the code below:

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>

Answers

The event listeners are attached to each button individually using addEventListener.
Inside each event listener, the values of campo1 and campo2 are retrieved, and the corresponding calculation is performed.
The result is directly updated in the .resultado div by assigning the desired text to the innerHTML property.

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>

You don’t need to create a function for each button, you can just get all type=button with querySelectorAll, then loop thru each element and use addEventListener to each element.

Once an button is clicked you can do console.log(op.id) and it will print the id of the button that was clicked and thats how you will know which operation to do wich a 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>

A very clever approach for this in order to keep the code as clean as possible is to assign an id to each button which matches the name of the function you want to use for that button.

Than we can easily use the appropriate function for each button click.

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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers