Problem with SWITCH javascript always runs by default

Question

Well, I have this problem and am dealing with, but I just can't get it to work

i has this function

function getDirections(dir) { var img; switch(dir) { case 0: img+='N.png'; break; case 1: img+='NE.png'; break; case 2: img+='E.png'; break; case 3: img+='SE.png'; break; case 4: img+='S.png'; break; case 5: img+='SO.png'; break; case 6: img+='O.png'; break; case 7: img+='NO.png'; break; default: alert('enetered default but direction='+dir); } return img; } 

pretty simple? now I have this interval set to 5000 ms to call getDirections (variable), this function works well the first time after it is called, but after that it always enters the default sentence, and also warns "the entered default value, and the direction = dirvalue ", I mean, even if dir is a value from 0 to 7, it will always enter the default value: but it will warn about the value so that it is served in one of the cases.

I did the same using else if it worked, so I don't know what happened with SWITCH

 if(dir==0){img+='N.png';} else if(dir==1){img+='NE.png';} else if(dir==2){img+='E.png';} else if(dir==3){img+='SE.png';} else if(dir==4){img+='S.png';} else if(dir==5){img+='SO.png';} else if(dir==6){img+='O.png';} else if(dir==7){img+='NO.png';} 

Answer 1

This is strange ... try to make sure dir is int, do it in front of the switch:

 dir = parseInt(dir); 

If the warning correctly displays the value, he must enter a switch, but still he can "look" correctly, but have a different data type. Do the conversion manually to make sure it is int

Answer 2

I know I'm a little late to the party, but I thought it might be important for those who don’t understand why the “ifs” worked, but the switch didn’t. Probably no one will read this answer, but I found it while searching for something else, so maybe someone will find this useful anyway:

Your switch is this:

 function getDirections(dir) { var img; switch(dir) { case 0: img+='N.png'; break; case 1: img+='NE.png'; break; case 2: img+='E.png'; break; case 3: img+='SE.png'; break; case 4: img+='S.png'; break; case 5: img+='SO.png'; break; case 6: img+='O.png'; break; case 7: img+='NO.png'; break; default: alert('enetered default but direction='+dir); } return img; } 

This is not the same as a series of double equal (==), but a series of triple equal (===). This would be equivalent to:

 if (dir === 0) { img+='N.png'; } else if (dir === 1) { img+='NE.png'; } else if (dir === 2) { img+='E.png'; } else if (dir === 3) { img+='SE.png'; } else if (dir === 4) { img+='S.png'; } else if (dir === 5) { img+='SO.png'; } else if (dir === 6) { img+='O.png'; } else if (dir === 7) { img+='NO.png'; } else { alert('enetered default but direction='+dir); } 

In the world "==", the integer 2 matches the string "2", but not in the country "===".

Answer 3

I would suggest that for some reason, dir is passed as a string. Try changing case 1: to case '1':

Answer 4

Using an array instead of a chain of if / else blocks or a giant switch statement will be faster, more flexible, and less error prone. In addition, you do not have to worry if dir is a number or a string. Instead:

 if(dir==0){img+='N.png';} else if(dir==1){img+='NE.png';} else if(dir==2){img+='E.png';} else if(dir==3){img+='SE.png';} else if(dir==4){img+='S.png';} else if(dir==5){img+='SO.png';} else if(dir==6){img+='O.png';} else if(dir==7){img+='NO.png';} 

you can save the file names in an array:

 var images = [ 'N.png', 'NE.png', 'E.png', 'SE.png', 'S.png', 'SO.png', 'O.png', 'NO.png' ]; 

or perhaps more readable:

 var images = "N.png NE.png E.png SE.png S.png SO.png O.png NO.png".split(' '); 

and then use only:

 img = images[dir]; 

A full implementation of getDirections using an array will be:

 var images = "N.png NE.png E.png SE.png S.png SO.png O.png NO.png".split(' '); function getDirections(dir) { var img = images[dir]; if (!img) { alert("something"); } return img; } 

Does it work for you?

If images used only in this function, you might want to save it as a property of the function to avoid polluting your namespace as follows:

 function getDirections(dir) { var img = getDirections.images[dir]; if (!img) { alert("something"); } return img; } getDirections.images = "N.png NE.png E.png SE.png S.png SO.png O.png NO.png".split(' '); 

or use closure.

Answer 5

It is hard to explain why, but for the default: case default: break; statement is also needed break; after him, like all other cases.

Answer 6

I just ran the code in FireFox / FireBug and named the function this way

 getDirections(0); getDirections('1'); getDirections("2"); 

The first one does it right, and the next two enter default . They are strings, not whole, which is what they are looking for. I added

 case "2": img+='NO2.png'; break; 

and then only the middle entered default . Obviously, there is a problem with the way you call the function. This is most likely a string. I also used your if-else block (added else{alert(dir);} and returned the correct value for each call.

Javascript can convert "on the fly" (I think there is a better word) between strings and ints (and others). This happens when you do a comparison using == . If you change the comparison in ifs to === , you get the same behavior as with the switch block.

Answer 7

I pasted your code into an HTML file and ran it with the following buttons:

 <button onclick="alert(getDirections(2))">Switch / Int</button> <button onclick="alert(getDirections('2'))">Switch / String</button> <button onclick="alert(getDirections2(2))">If-Else / Int</button> <button onclick="alert(getDirections2('2'))">If-Else / String</button> 

When invoking a switch version with a simple 2 it works as expected. Calling with '2' allows you to go to the default line. The if-else version works as expected in both cases. Therefore, the problem is probably that switch does not perform an implicit conversion, but == does.