2017-08-29 88 views
-2

我試圖在用戶點擊提交按鈕之前實時顯示兩個無線電組的計算結果。如果裏面如果內部if語句 - 是否有可能?

<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語句中的語句還有可能嗎?

+0

你要求的代碼審查?或者是不工作? –

+0

我覺得所有事情都應該起作用,所以也許只是代碼審查。我仍然是新的。 – Lynn

回答

0

因爲我看到你的JS代碼在邏輯上是錯誤的。

  1. 所有click事件首先是沒有綁定,因爲這種情況if (document.getElementById("thirteen").selected)將始終返回false和事件不會綁定到無線電元件。

  2. else不能有條件。 else (document.getElementById("25").selected)這是錯誤的。

我已經糾正了你的代碼,但你neeed糾正休息,

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

我明白了。因此,必須使用if/else-if語句創建事件監聽器,而不是選擇document.getElementById(「十三」)的條件。謝謝!會有人有一些偉大的書籍,將幫助我的JavaScript的邏輯?特定功能和循環。 – Lynn

+0

MDN是最好的學習場所,https://developer.mozilla.org/en-US/docs/Web/JavaScript –