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。

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

   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语句中使用if语句吗？

Answer 1

我认为你的JS代码在逻辑上是错误的。

首先，click事件尚未绑定，因为此条件if (document.getElementById("thirteen").selected)将始终返回false，并且事件不会绑定到无线电元素。
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;
     }
});

if if inside if if语句 - 是否可能？

1 个答案: