lundi 28 août 2017

if inside if inside if statements - is it possible?

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