This is what i would like to obtain: Upon clicking the button, it will display the value of the quantity at the summary div and the total cost. However, both the quantity and total sum were not being output. There are no errors received.
HTML code:
<!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="A-D" />
<input type="button" id="button2" class="button" value="E-H" />
<input type="button" id="button3" class="button" value="E-H" />
<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>
javascript code:
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="A-D" />
<input type="button" id="button2" class="button" value="E-H" />
<input type="button" id="button3" class="button" value="E-H" />
<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;
}