switch statement javascript

Question

I have searched quite awhile for this, but still I am none-the-wiser. I am trying to do a simple calculator for a website which calculates prices based on type of material. I can't seem to get it working. It keeps stepping straight to the default case of the switch statement below.

<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');
  }
}

score 6 · Accepted Answer · edited May 23 '17 at 12:31

First warning flag: You really shouldn't have more than one thing with the same ID.

Once you have a unique ID for each option, you can then just check the checked property of each element.

<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>

followed by:

document.getElementById("inputWalls_block").checked

Obviously, you could wrap this up so you don't have to have loads of duplicate code:

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];
     }
  }
}

Of course, this being JavaScript and with you interacting with the DOM, you can save yourself a lot of time and effort using JQuery, but if you're trying to figure out how these things work without a supporting library, that is useful knowledge to have.

You can find a lot more helpful stuff about this in the answers to this question.

No apology called for! Sometimes the hardest part is just knowing what to search for. Everybody has got to start somewhere. — glenatron, Jul 07 '14 at 16:01

adeneo · Answer 2 · 2017-09-21T22:54:32.647

2

Well, in

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

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

       // stuff

    case "brick" :

    ....

radioButtons is a nodeList with DOM elements, a switch comparing it to strings wouldn't work at all

Also note that you're using the same ID for all the elements, which is invalid.

What you really want is the value of the checked radio button

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

querySelector will let you target the checked radio button easily, and get it's value.

edited Sep 21 '17 at 22:54

answered Jul 07 '14 at 15:22

adeneo

312,895
29
395
388

This is the best answer assuming you don't need to support IE7. – Denys Séguret Jul 07 '14 at 15:42

score 1 · Answer 3 · answered Jul 07 '14 at 15:26

1

You need to get the checked radioButton, like so:

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

instead of using document.getElementsByName("inputWalls");

answered Jul 07 '14 at 15:26

Husman

6,819
9
29
47

switch statement javascript

3 Answers3