I am building a price calculator for a tour. The total price should change based on the tour type selected and based on the number of guests.
Right now the calculator updates and calculates the total price when a tour type is selected, however I can’t get it to update when I change the guest count.
The way it programed right now, if I put in guest count first an then select a tour type, the total price displays correctly. However, if I then go back and try to update the guest count, the price won’t update – so I currently have to change the guest count, then select a new tour type and then reselect the tour type that I want, in order to get an updated total
function populate(tournameId) {
var total = 0;
var quantity = document.getElementsByName('quantity')[0].value;
var tournameSelect = document.getElementById(tournameId);
let selectedOption = tournameSelect.options[tournameSelect.selectedIndex];
var selectedtournameValue = +selectedOption.dataset.price;
var total = quantity * selectedtournameValue;
document.getElementById("total").value = total;
}
<p class="normalinput">Enter Total Number of Guests:</p>
<input type="number" class="quantity" name="quantity" value="0" required>
<br>
<select class="normalinput" name="tourname" id="tourname" onchange="populate('tourname')">
<option data-price="0" value="None">None</option>
<option data-price="59" value="G0001">Milano Coffee Crawl (Coffee Included) <span>€ </span>59</option>
<option data-price="49" value="G0002">Milano Coffee Crawl (Coffee Not Included) <span>€</span>49</option>
<option data-price="39" value="G0003">Milano History Walk <span>€</span>39</option>
<option data-price="69" value="G0004">Napoli Coffee Crawl (Coffee Included) <span>€</span>69</option>
<option data-price="59" value="G0005">Npoli Coffee Crawl (Coffee Not Included) <span>€</span>59</option>
</select>
<p class="total"> Total: <span>€</span><input type="text" name="total" id="total" value="0"></p>
3
Answers
The issue is because you need to bind event handlers to both the
select
andinput
.Also note that it’s no longer good practice to use the
onX
attributes in your HTML, so be very wary of any guides or tutorials that recommend this. Instead you should use JS to attach your event handlers, as demonstrated in the following example:This can be fixed by calling the same function on
onchange
of inputBelow is the final updated script,
I would use the input event and delegate from a common container.
Also use value="" on the select in case you ever want to make it required