switch語句javascript

Question

我已經爲此搜索了一段時間，但我仍然沒有什麼比較聰明的。我正在嘗試爲基於材料類型計算價格的網站做一個簡單的計算器。我似乎無法得到它的工作。它繼續直接轉到下面的switch語句的默認情況。

<div class="form-group"> 
<div class="btn-group" data-toggle="buttons" class="col-lg-3 col-lg-offset-10"> 
      <label class="btn btn-default **active**"> 
      <input type="radio" name="inputWalls" id="inputWalls" value="block" checked>Block</label> 
      <label class="btn btn-default"> 
      <input type="radio" name="inputWalls" id="inputWalls" value="brick">Brick </label> 
      <label class="btn btn-default"> 
      <input type="radio" name="inputWalls" id="inputWalls" value="stone">Stone </label> 

JAVASCRIPT

function quote(){ 
     var blockPrice = 0; 
     var brickPrice = 0; 
     var stonePrice = 0; 
     var myWidth = parseFloat(document.getElementById("widthInput").value); 
     var myHeight = parseFloat(document.getElementById("heightInput").value); 
     var radioButtons = document.getElementsByName("inputWalls"); 
     var totalArea = myWidth + myHeight; 

    switch(radioButtons){ 
    case "block" : 

     blockPrice = totalArea * 1.90; 
     alert(blockPrice); 
     break; 

    case "brick" : 
    { 
     brickPrice = totalArea * 3.80; 
     alert(brickPrice); 
     break; 
    } 
    case "stone" : 
    { 
     stonePrice = totalArea * 4.90; 
     alert(stonePrice); 
     break; 
    } 
    default : 
     alert('you have not selected material'); 
    } 
} 

Answer 1

第一個警告標誌：你真的不應該有多個具有相同ID的東西。

一旦你有每個選項的唯一ID，那麼你可以檢查每個元素的checked屬性。

<label class="btn btn-default **active**"> 
<input type="radio" name="inputWalls" id="inputWalls_block" value="block" checked>Block</label> 
<label class="btn btn-default"> 
<input type="radio" name="inputWalls" id="inputWalls_brick" value="brick">Brick </label> 

依次爲：

document.getElementById("inputWalls_block").checked 

很顯然，你可以把這包裹起來，所以你不必有重複的代碼加載：

function getCheckedSection() 
{ 
    var sections=["block", "brick", "stone"]; 
    for (var i=0;i< sections.length; i++) 
    { 
    if (document.getElementById("inputWalls_"+sections[i]).checked) 
    { 
     return sections[i]; 
    } 
    } 
} 

當然，這是JavaScript的並且通過與DOM進行交互，您可以使用JQuery節省大量時間和精力，但如果您試圖在沒有支持庫的情況下確定這些工作是如何工作的，那麼這是非常有用的知識。

你可以找到the answers to this question.

Answer 2

那麼，在

var radioButtons = document.getElementsByName("inputWalls"); // nodeList 

switch(radioButtons){ 
    case "block" : // Woot, string ! 

     // stuff 

    case "brick" : 

    .... 

單選按鈕是與DOM元素節點列表，它比較字符串開關不會在所有的工作

另請注意，您對所有元素使用相同的ID，這是無效的。

你真正想要的是選中的單選按鈕

var radioButtons = document.querySelector('[name="inputWalls"]:checked').value; 

querySelector的價值將讓你輕鬆針對檢查單選按鈕，並把它的價值。

Answer 3

這個多了很多有用的東西，你需要獲得檢查單選按鈕，像這樣：的

document.querySelector("inputWalls:checked").value; 

而是採用document.getElementsByName("inputWalls");