if inside if 在 if 语句中 - 有可能吗？

Question

我正在尝试在用户单击提交按钮之前实时显示两个无线电组的计算。

<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>

我使用的是纯 JavaScript。

假设这些类别中的每一个都代表所选单选按钮的值。一旦我定义了我创建的变量 if 语句来测试两个按钮是否都被选中并且事件是否会发生

   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;
       }
    });
   }     

我还为 document.getElementById("fifteen").selected) {} and if (document.getElementById("twenty").selected {} 创建了 if 语句

我没有把它放在正确的顺序还是我错过了什么？甚至可以在 if 语句中执行 else if 语句吗？

Answer 1

我看到你的 JS 代码在逻辑上是错误的。

1. 首先，click 事件尚未绑定，因为此条件 if (document.getElementById("thirteen").selected) 将始终返回 false，并且事件不会绑定到无线电元素。

2. else 不能有条件。 else (document.getElementById("25").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 if (document.getElementById("25").selected) {  //changed this to else-if
         total += total * tipVal3;
         document.getElementById("total").innerHTML = "Total:$ " + total;
     }
});