I am encountering an issue with my HTML form:
<form>
<select>
<option value="" selected>Select an option</option>
<option value="Warrior">Warrior</option>
<option value="Paladin">Paladin</option>
<option value="Mage">Mage</option>
<option value="Shaman">Shaman</option>
<option value="Warlock">Warlock</option><option value="Priest">Priest</option><option value="Druid">Druid</option><option value="Hunter">Hunter</option>
<option value="Rogue">Rogue</option>
</select>
<p></p>
<br>
Stamina
<br>
<input type="number" name="stamina" placeholder="0" />
<br>
<span id="staminaresult"></span>
The JavaScript function calculates a result based on the user input in the form but also requires selection from a dropdown menu:
$("form").on('keyup change', function (e){
e.preventDefault();
var selectedValue = $('select').val();
var stamina = $('input[name=stamina]').val();
if (!selectedValue) {
return alert('You must choose your class');
}
stamina = stamina * 10;
document.getElementById('staminaresult').innerHTML = ('+' + stamina + ' Hit Points')
When a user interacts with the form, they may encounter multiple error dialogs due to the .keyup function triggering unintentionally. How can I modify the code to prevent this?
For more details and context, refer to this jsfiddle link: https://jsfiddle.net/ejnLbyug/
Thank you, T