这就是我想要获得的:单击按钮后，它将显示摘要div处的数量值和总成本。然而，数量和总量都没有输出。没有收到任何错误。
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="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代码:
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;
html
<!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>