I'm trying to display a calculation of two radio groups, in real time, before users click submit button.
<div class="container-5">
<div class="choices1">
<h1 class>Regular<br>Regular Choice</h1>
<input type="radio" id="thirteen" name="style" value="13.00">
</div>
<div class="choices2">
<h1>Popular<br>Popular Choice</h1>
<input type="radio" id="fifteen" name="style" value="15.00">
</div>
<div class="choices3">
<h1>Fancy<br>Fancy Choice<br>Literally.</h1>
<input type="radio" id="twenty" name="style" value="20.00">
</div>
</div>
<div class="container-8">
<div class="gratuity1">
<h1 class>15%<br>Good.</h1>
<input type="radio" id="15" name="tip" value=".15">
</div>
<div class="gratuity2">
<h1>20%<br>Excellent Service.</h1>
<input type="radio" id="20" name="tip" value=".20">
</div>
<div class="gratuity3">
<h1>25%<br>Beyond Excellent</h1>
<input type="radio" id="25" name="tip" value=".25">
</div>
</div>
I'm using pure javascript.
Each of these categories is suppose to represent the value of the selected radio button. Once I've defined the variables I created if statements to test if both buttons were selected and event would occur
var styleVal1= 3.0;
var styleVal2 = 5.0;
var styleVal3 = 10.0;
var tipVal1 = 0.1;
var tipVal2 = 0.15;
var tipVal3 = 0.2;
var total = 0.00;
if (document.getElementById("thirteen").selected) {
document.getElementById("thirteen").addEventListener("click", function() {
total = styleVal1;
document.getElementById("total").innerHTML = "Total:$ " + total;
if (document.getElementById("15").selected) {
total += total * tipVal1;
document.getElementById("total").innerHTML = "Total:$ " + total;
} else if (document.getElementById("20").selected) {
total += total * tipVal2;
document.getElementById("total").innerHTML = "Total:$ " + total;
} else (document.getElementById("25").selected) {
total += total * tipVal3;
document.getElementById("total").innerHTML = "Total:$ " + total;
}
});
}
I also did the same for:
if (document.getElementById("fifteen").selected) {
&&
if (document.getElementById("twenty").selected {
Am I not putting this in the right order or am I missing something? Is it even possible to do else if statements inside if statements?
Aucun commentaire:
Enregistrer un commentaire