切换语句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节省大量的时间和精力,但如果你试图弄清楚这些东西如何在没有支持库的情况下工作,那么这对于有.

你可以在这个问题的答案中找到更多有用的东西.