My coding project involves a basic ordering system where users can input an integer, click on an update button, and see the total cost displayed below. Despite my efforts, I've encountered issues with two different methods:
- Using plain JavaScript for orderQuantity - innerHTML fails to update
- Using parseInt for orderQuantity - innerHTML returns £NaN
I need some guidance in identifying where the problem lies. Here's the code snippet:
let orderQuantity = parseInt(document.getElementById("order-stepper").value);
let orderText = document.getElementById("order-value");
let orderValue = 2.50;
let orderAmount = orderValue * orderQuantity;
let updateButton = document.getElementById("order-update");
function update() {
orderText.innerHTML = ("Total cost: £" + orderAmount);
}
updateButton.addEventListener("click", update);.order-stepper {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
...
... (CSS styles omitted for brevity)
...
#order-update:hover {
background-color: #e2979c;
}<div class="order-stepper">
<label for="quantity">Select your quantity</label>
<input id="order-stepper" type="number" name="quantity" value="" max="3">
</div>
<button id="order-update" type="button" name="button">Update</button>
<div class="order-price">
<h2 id="order-value">Total cost: £0</h2>
</div>If anyone can provide assistance, it would be greatly appreciated.