Estaba tratando de codificar un sistema similar a POS como un pequeño proyecto para aprender. Así que actualmente tengo dos botones "cola" y "fanta". Los precios de esas bebidas están en un objeto. Tan pronto como hago clic en un botón, el precio debe agregarse a la suma. Bueno, lo que el código está haciendo actualmente es sumar los precios del mismo producto. Entonces, si hago clic tres veces seguidas en "cola", que tiene un precio de 3, obtengo 9 como suma. Hasta aquí todo bien, pero tan pronto como le doy a fanta, que tiene un precio de 2, obtengo una suma de 2. Pero cuando sigo con el botón de cola, sigue en 12 y así sucesivamente.
Aquí está el código:
const btnChoose = document.querySelectorAll(".btn"); const drinks= { cola: 4, fanta: 3, }; for (let i = 0; i < btnChoose.length; i++) { let sum = null; btnChoose[i].addEventListener("click", function () { let price = drinks[this.id]; sum += price; console.log(typeof sum, sum); }); }y aquí está el HTML:
<!DOCTYPE html> <html> <head> <title>POS</title> </head> <body> <button class="btn" id="cola">Cola</button> <button class="btn" id="fanta">Fanta</button> <script> .... </script> </body> </html>Su declaración let sum=null crea una variable de alcance local separada cada paso a través del bucle for . Simplemente mueva la declaración fuera del bucle for para tener solo una variable de suma.
let sum=null; for (let i = 0; i < btnChoose.length; i++) {violín aquí: https://jsfiddle.net/cLrao8fu/
Sum es un producto inteligente porque ha declarado la variable sum dentro del bucle. Si lo mueve fuera del ciclo como se muestra a continuación, debería obtener una suma que incorpore la suma de todos los valores del producto.
let sum = 0; for (let i = 0; i < btnChoose.length; i++) { let price = 0; btnChoose[i].addEventListener("click", function () { price = drinks[this.id]; sum += price; console.log(typeof sum, sum); }); }es porque está definiendo sum en el bucle, defínalo fuera del bucle:
const btnChoose = document.querySelectorAll(".btn"); const drinks= { cola: 4, fanta: 3, }; let sum = null; for (let i = 0; i < btnChoose.length; i++) { btnChoose[i].addEventListener("click", function () { let price = drinks[this.id]; sum += price; console.log(typeof sum, sum); }); }