CODEWITHSUNDEEP
javascriptjqueryhtml
cbr
cbr

Reputation: 13642

Javascript switch not working with <option> tag values

I have the following HTML:

<select id="rankBox">
    <option value="0">100</option>
    <option value="1">150</option>
    <option value="2">200</option>
    <option value="3">250</option>
    <option value="4">300</option>
    <option value="5">350</option>
    <option value="6">400</option>
</select>

<input type="Submit" id="button1" value="Generate" onclick="doStuff()">

and the following Javascript:

function doStuff() {
    var choice = $("#rankBox option:selected").val();
    console.log(choice);
    switch (choice) {
        case 0:
        case 1:
            colorQ = "^7";
            break;
        case 2:
            colorQ = "^L";
            break;
        case 3:
            colorQ = "^A";
            break;
        case 4:
            colorQ = "^8";
            break;
        case 5:
            colorQ = "^+";
            break;
        case 6:
            colorQ = "^<";
            break;
        default:
            alert("Something went wrong");
            break;
    }
    alert(colorQ);
}

In short, I have a switch statement which is supposed to check the value of the option the user has selected. As you may see, I have added console.log to see if the problem is with acquiring the user's input, but that is not the issue. The issue is the switch statement, which just does not work. Am I using wrong syntax or something?

jsFiddle: http://jsfiddle.net/3qTHW/2/ (jsFiddle doesn't work in my browser at all, says doStuff() is not defined)

Thanks in advance.

Upvotes: 3

Views: 164

Answers (3)

Talha Masood
Talha Masood

Reputation: 993

This was an easy problem, by looking at the code one could see that the line var choice = $("#rankBox option:selected").val(); is adding string to variable choice. And that is the reason none of the case statements worked and the default code executed.

The best way not to run into such problems is to "Debug" your JavaScript code properly. This will save you a lot of precious time and you will find the root cause to each problem yourself.

To debug your code, you can use Firebug extension in Firefox. This will actually stop the code execution for you and guide you line by line telling you the state of each variable at every line of code. So in case of your problem, all I did was add your code in .html file and ran it in Firefox with "Debugger" points specified. The JS code looked like this. 

function doStuff() {
    var choice = $("#rankBox option:selected").val();
    debugger; // This is the point where the debugging starts

       console.log(choice); // console.log wont help as it did not tell me the type
    switch (choice) { // Here Firebug tells me that choice is actually a string
        case 0:
        case 1:
            colorQ = "^7";
            break;
        case 2:
            colorQ = "^L";
            break;
        case 3:
            colorQ = "^A";
            break;
        case 4:
            colorQ = "^8";
            break;
        case 5:
            colorQ = "^+";
            break;
        case 6:
            colorQ = "^<";
            break;
        default:
            alert("Something went wrong");
            break;
    }
    alert(colorQ);
}

Note I put a "debugger" above console.log(). From this point onward, the code stopped at each line and I could see the value in each variable. This helped me notice string value in choice.

Happy Debugging :)

Upvotes: 1

user3041160
user3041160

Reputation: 684

Use javascript parseInt() method like this :

var choice = parseInt($("#rankBox option:selected").val());

Upvotes: 0

adeneo
adeneo

Reputation: 318182

It's not an integer, it's a string, as all values from an element are strings.

You'll have to either parse it as an integer :

function doStuff() {
    var choice = parseInt( $("#rankBox option:selected").val(), 10);

      ....etc

or change the switch to work with strings (you should be trimming)

switch ( $.trim(choice) ) {
    case '0':
    case '1':

     ....etc

Upvotes: 3

Related Questions