Esto es lo que me gustaría obtener: al hacer clic en el botón, se mostrará el valor de la cantidad en el div de resumen y el costo total. Sin embargo, tanto la cantidad como la suma total no se emitían. No hay errores recibidos.
Código HTML:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="try2.css"> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script> <script type = "text/javascript" src = "try2.js" ></script> </head> <body> <input type="button" id="button1" class="button" value="AD" /> <input type="button" id="button2" class="button" value="EH" /> <input type="button" id="button3" class="button" value="EH" /> <p> Button Clicked <span id="display">0</span> Times </p> <script src="try2.js"></script> <!-- <input type="reset" value="Reset"/> --> <input type="submit" value="Proceed" onclick="proceedButton()" class="proceed-button"/> <div class="legend-section"> </div> <div class="payment-summary"> <h2 class="payment-summary-font">Summary</h2> <div class="quantity"> <p class="payment-summary-font-font">Quantity</p> <span id="display2"></span> </div> <div class="sum"> <p class="payment-summary-font-font">Total Sum ($)</p> <span id="total-sum"></span> </div> </div> </body> </html>codigo javascript:
var buttons = document.getElementsByClassName("button"); var count = 0; var disp = document.getElementById("display"); var disp2= document.getElementById("display2"); var totalSum = document.getElementById("total-sum"); for (let i = 0, l = buttons.length; i < l; i++) { buttons[i].addEventListener('click', function() { buttons[i].classList.toggle('active'); if (this.classList.contains("active")) { count++; } else { count--; } disp.innerHTML = count; }) } document.getElementById("display2").innerHTML = count; totalSum = disp2 * 12; <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="try2.css" /> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous" ></script> </head> <body> <input type="button" id="button1" class="button" value="AD" /> <input type="button" id="button2" class="button" value="EH" /> <input type="button" id="button3" class="button" value="EH" /> <p>Button Clicked <span id="display">0</span> Times</p> <!-- <input type="reset" value="Reset"/> --> <input type="submit" value="Proceed" onclick="proceedButton()" class="proceed-button" /> <div class="legend-section"></div> <div class="payment-summary"> <h2 class="payment-summary-font">Summary</h2> <div class="quantity"> <p class="payment-summary-font-font">Quantity</p> <span id="display2"></span> </div> <div class="sum"> <p class="payment-summary-font-font">Total Sum ($)</p> <span id="total-sum"></span> </div> </div> <!-- Incude script at the end --> <script type="text/javascript" src="try2.js"></script> </body> </html> var count = 0; var disp = document.getElementById("display"); var disp2 = document.getElementById("display2"); var totalSum = document.getElementById("total-sum"); // get all the buttons with class "button" var buttons = document.getElementsByClassName("button"); for (let i = 0, l = buttons.length; i < l; i++) { buttons[i].addEventListener("click", function () { // add onclick evenListener to increment count and store it in "display" count++; disp.innerHTML = count; }); } // The function you needed when clicking the proceed button // sets the value of count to "display2" // Calculates the total and assigns it to "total-Sum" function proceedButton() { disp2.innerHTML = count; totalSum.innerHTML = disp2.innerHTML * 12; }