切换语句javascript

switch statement javascript

本文关键字：javascript 语句      更新时间：2023-09-26

我已经搜索了很长一段时间，但我仍然不知道。我试图做一个简单的计算器为一个网站，根据材料的类型计算价格。我好像怎么也弄不动。它会一直步进到下面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');
  }
}

第一个警告标志:您真的不应该有多个具有相同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，但如果你试图弄清楚这些东西是如何工作的，没有一个支持库，这是有用的知识。

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

在

var radioButtons = document.getElementsByName("inputWalls"); // nodeList
switch(radioButtons){
    case "block" :  // Woot, string !
       // stuff
    case "brick" :
    ....

radioButtons是一个带有DOM元素的nodeList，比较它和字符串的开关根本不起作用

还请注意，您对所有元素使用了相同的ID，这是无效的。

你真正想要的是选中的单选按钮的值

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

querySelector将让您轻松地针对选中的单选按钮，并获得它的值

您需要获得选中的radioButton，如下所示:

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

代替document.getElementsByName("inputWalls");

相关文章：