How do I get the sum of the values I add to the list?

Asked

Viewed 51 times

0

I did this program to list items from a budget. It adds, a brief description of what was added and shows the value of the item.

I want to sum up all the values and show a total that updates every item listed, only I have no idea how to do.

If I ask to calculate outside the error function, and I put in the value of the total updates equal the value of the last item listed...

I had never used Stackoverflow, if you can also give feedback on ways to structure this question so that the topic is not closed again I thank you!

function listar() {
  let getn1 = document.getElementById('n1').value
  let getn2 = document.getElementById('n2').value
  let getn3 = document.getElementById('n3').value
  let list = document.getElementById('list')
  let m3 = getn1 * getn2 * getn3
  var resultado = m3 * 10
  let valor = resultado.toLocaleString('pt-br', {
    style: 'currency',
    currency: 'BRL'
  })


  list.innerHTML += `<li>Serviço de recorte de ${getn1}m X ${getn2}m e profundidade de ${getn3}m.............................${valor}</li>`

  document.getElementById('n1').value = ''
  document.getElementById('n2').value = ''
  document.getElementById('n3').value = ''

  total()

  function total() {
    let result = document.getElementById('res')
    var res = 0
    var final = res + resultado
    result.innerHTML = `Total: ..........................${final}`

  }
}
<body>
  <h3>Serviço de Recorte CNC</h3>
  <input type="number" id="n1" placeholder="Altura">
  <input type="number" id="n2" placeholder="Largura">
  <input type="number" id="n3" placeholder="Profundidade">
  <input type="button" id="add" value="Adicionar" onclick="listar()">
  <ol id="list">
  </ol>
  <p id="res">Resultado:.................</p>
</body>

javascript variables calculus

  • never used the stack, I will edit here....

  • In this part he just describing you, does not enter the calculation, anyway I will edit again, I want is the sum of the results listed

1 answer

1

Its nested function total() is not totaling, every time the value of the variable is called res is started at zero.

function total() {
    let result = document.getElementById('res')
    //Aqui res é iniciado em 0.
    var res = 0              
    var final = res + resultado
    result.innerHTML = `Total: ..........................${final}`
}

An immediate exit would be to remove the statement var res = 0 from inside the code and passing the variable final for the overall scope. The function total() can be transformed into an expression IIFE (Immediately Invoked Function Expression) which is a Javascript function that runs as soon as defined.

var final = 0

function listar() {
  let getn1 = document.getElementById('n1').value;
  let getn2 = document.getElementById('n2').value;
  let getn3 = document.getElementById('n3').value;
  let list = document.getElementById('list');
  let m3 = getn1 * getn2 * getn3;
  var resultado = m3 * 10;
  let valor = resultado.toLocaleString('pt-br', {
    style: 'currency',
    currency: 'BRL'
  });


  list.innerHTML += `<li>Serviço de recorte de ${getn1}m X ${getn2}m e profundidade de ${getn3}m.............................${valor}</li>`;

  document.getElementById('n1').value = '';
  document.getElementById('n2').value = '';
  document.getElementById('n3').value = '';

  //A função total foi convertida em um IIFE.
  (function() {
    let result = document.getElementById('res')
    final += resultado
    result.innerHTML = `Total: ..........................${final}`
  })()

}
<body>
  <h3>Serviço de Recorte CNC</h3>
  <input type="number" id="n1" placeholder="Altura">
  <input type="number" id="n2" placeholder="Largura">
  <input type="number" id="n3" placeholder="Profundidade">
  <input type="button" id="add" value="Adicionar" onclick="listar()">
  <ol id="list">
  </ol>
  <p id="res">Resultado:.................</p>
</body>

Or remove the function at once total().

let final = 0;

function listar() {
  let getn1 = document.getElementById('n1').value;
  let getn2 = document.getElementById('n2').value;
  let getn3 = document.getElementById('n3').value;
  let list = document.getElementById('list');
  let m3 = getn1 * getn2 * getn3;
  var resultado = m3 * 10;
  let valor = resultado.toLocaleString('pt-br', {
    style: 'currency',
    currency: 'BRL'
  });


  list.innerHTML += `<li>Serviço de recorte de ${getn1}m X ${getn2}m e profundidade de ${getn3}m.............................${valor}</li>`;

  document.getElementById('n1').value = '';
  document.getElementById('n2').value = '';
  document.getElementById('n3').value = '';

  let result = document.getElementById('res');
  final += resultado;
  result.innerHTML = `Total: ..........................${final}`;

}
<body>
  <h3>Serviço de Recorte CNC</h3>
  <input type="number" id="n1" placeholder="Altura">
  <input type="number" id="n2" placeholder="Largura">
  <input type="number" id="n3" placeholder="Profundidade">
  <input type="button" id="add" value="Adicionar" onclick="listar()">
  <ol id="list">
  </ol>
  <p id="res">Resultado:.................</p>
</body>

Browser other questions tagged javascript variables calculus

You are not signed in. Login or sign up in order to post.