Instead of adding one event listener to each of the selects, you could add one event listener to the form.
You add an id to the form:
<form id="myform" name="priceCalc" action="">Current Division
then you add the eventListener to it:
document.getElementById('myform').addEventListener('change', function(){
total();
})
Here is a working example
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var current_division,
desired_division;
function current1() {
var Amt = document.priceCalc.CRANK1;
var Qty = document.priceCalc.CRANK2;
return parseInt(Qty.value) * parseFloat(Amt.value);
}
function desiredd() {
var Amt = document.priceCalc.DRANK1;
var Qty = document.priceCalc.DRANK2;
return price = parseInt(Qty.value) * parseFloat(Amt.value);
}
function total() {
if(isNaN(current1())) {
current_division = 0;
} else {
current_division = current1();
}
if(isNaN(desiredd())){
desired_division = 0;
} else {
desired_division = desiredd();
}
var totalPrice = current_division+desired_division;
document.getElementById('prices').value = totalPrice;
}
document.getElementById('myform').addEventListener('change', function(){
total();
})
<!-- language: lang-css -->
select:valid {
background-color: white;
border-radius: 1px solid grey;
text-align-last:left;
border-radius: 5px;
background: #D3D3D3;
padding: 20px;
width: 200px;
height: 150px;
border-radius: 5px;
border: 1px solid #D3D3D3;
padding: 20px;
width: 200px;
height: 150px;
border-radius: 5px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 1px;
width: 150px;
height: 25px;
}
form {
display: inline-block;
text-align: right;
}
input {
display: inline-block;
text-align: right;
border-radius: 1px solid white;
}
<!-- language: lang-html -->
<form id="myform" name="priceCalc" action="">Current Division
<br/>Rank:
<select name="CRANK1" id="CRANK1">
<option type="text" value="1">Bronze</option>
<option type="text" value="2">Silver</option>
<option type="text" value="3">Gold</option>
<option type="text" value="4">Platinum</option>
<option type="text" value="5">Diamond</option>
</select>
<br>
<br/>Division:
<select name="CRANK2">
<option type="text" value="6">Division V</option>
<option type="text" value="7">Division IV</option>
<option type="text" value="8">Division III</option>
<option type="text" value="9">Division II</option>
<option type="text" value="10">Division I</option>
</select>
<br>
<br>
<br/>Desired Division
<br/>Rank:
<select name="DRANK1" >
<option type="text" value="1">Bronze</option>
<option type="text" value="2">Silver</option>
<option type="text" value="3">Gold</option>
<option type="text" value="4">Platinum</option>
<option type="text" value="5">Diamond</option>
</select>
<br>
<br/>Division:
<select name="DRANK2" >
<option type="text" value="6">Division V</option>
<option type="text" value="7">Division IV</option>
<option type="text" value="8">Division III</option>
<option type="text" value="9">Division II</option>
<option type="text" value="10">Division I</option>
</select>
<br>
<br>
<input type="text" id="prices">
<br/>
<input type="button" value="Figure out pricing!" id="submit_button">
<br>
</form>
<!-- end snippet -->
You need to add a `change` event listener to each dropdown. Change the "name" fields on your `select` elements to `id` fields and grab them by ID using JS. Then, add an event listener which will run your `total()` function whenever your dropdown values are updated.
document.getElementById("CRANK1").addEventListener('change', total);
document.getElementById("CRANK2").addEventListener('change', total);
document.getElementById("DRANK1").addEventListener('change', total);
document.getElementById("DRANK2").addEventListener('change', total);
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var current_division,
desired_division;
function current1() {
var Amt = document.priceCalc.CRANK1;
var Qty = document.priceCalc.CRANK2;
return parseInt(Qty.value) * parseFloat(Amt.value);
}
function desiredd() {
var Amt = document.priceCalc.DRANK1;
var Qty = document.priceCalc.DRANK2;
return price = parseInt(Qty.value) * parseFloat(Amt.value);
}
function total() {
if(isNaN(current1())) {
current_division = 0;
} else {
current_division = current1();
}
if(isNaN(desiredd())){
desired_division = 0;
} else {
desired_division = desiredd();
}
var totalPrice = current_division+desired_division;
document.getElementById('prices').value = totalPrice;
}
document.getElementById("CRANK1").addEventListener('change', total);
document.getElementById("CRANK2").addEventListener('change', total);
document.getElementById("DRANK1").addEventListener('change', total);
document.getElementById("DRANK2").addEventListener('change', total);
<!-- language: lang-css -->
select:valid {
background-color: white;
border-radius: 1px solid grey;
text-align-last:left;
border-radius: 5px;
background: #D3D3D3;
padding: 20px;
width: 200px;
height: 150px;
border-radius: 5px;
border: 1px solid #D3D3D3;
padding: 20px;
width: 200px;
height: 150px;
border-radius: 5px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 1px;
width: 150px;
height: 25px;
}
form {
display: inline-block;
text-align: right;
}
input {
display: inline-block;
text-align: right;
border-radius: 1px solid white;
}
<!-- language: lang-html -->
<form name="priceCalc" action="">Current Division
<br/>Rank:
<select id="CRANK1">
<option type="text" value="1">Bronze</option>
<option type="text" value="2">Silver</option>
<option type="text" value="3">Gold</option>
<option type="text" value="4">Platinum</option>
<option type="text" value="5">Diamond</option>
</select>
<br>
<br/>Division:
<select id="CRANK2">
<option type="text" value="6">Division V</option>
<option type="text" value="7">Division IV</option>
<option type="text" value="8">Division III</option>
<option type="text" value="9">Division II</option>
<option type="text" value="10">Division I</option>
</select>
<br>
<br>
<br/>Desired Division
<br/>Rank:
<select id="DRANK1" >
<option type="text" value="1">Bronze</option>
<option type="text" value="2">Silver</option>
<option type="text" value="3">Gold</option>
<option type="text" value="4">Platinum</option>
<option type="text" value="5">Diamond</option>
</select>
<br>
<br/>Division:
<select id="DRANK2" >
<option type="text" value="6">Division V</option>
<option type="text" value="7">Division IV</option>
<option type="text" value="8">Division III</option>
<option type="text" value="9">Division II</option>
<option type="text" value="10">Division I</option>
</select>
<br>
<br>
<input type="text" id="prices">
<br/>
<input type="button" value="Figure out pricing!" id="submit_button">
<br>
</form>
<!-- end snippet -->
