I have the following function, which, among other parameters, receives a parameter called pack_choice (which is a number). Depending on the number, I want to assign a text to var, and later print this var on canvas.

Here's the full function:

function create_voucher(visitor_name, unique_number, pack_choice)
{
var canvas = $("#canvas_voucher")[0];
var str_pack_name;

alert(pack_choice);

switch (pack_choice)
{
    case 1:
        str_pack_name = 'text 1';
        alert(str_pack_name);
        break;
    case 2:
        str_pack_name = 'text 2';
        alert(str_pack_name);
        break;
    case 3:
        str_pack_name = 'text 3';
        alert(str_pack_name);
        break;
}

alert(str_pack_name);

if (canvas.getContext)
{
    var ctx = canvas.getContext('2d');

    // Draw shapes
    var img = new Image();
    img.src = 'images/voucher.jpg';

    img.onload = function(){
        ctx.drawImage(img,0,0);
        ctx.fillStyle="#000000";

        ctx.font="bold 25px monospace";
        ctx.fillText(str_pack_name, 600, 120);

        ...draw name...

        ...draw number...
        draw_voucher_img();

        ...jQuery functions...
    }
} else {
    alert('Please update your browser');
}

}

The alert(pack_choice); does give me the passed number. But alert(str_pack_name); gives me undefined message in the alert and draws it on the canvas.

Why is it happening and how do I fix it?

I have the following function, which, among other parameters, receives a parameter called pack_choice (which is a number). Depending on the number, I want to assign a text to var, and later print this var on canvas.

Here's the full function:

function create_voucher(visitor_name, unique_number, pack_choice)
{
var canvas = $("#canvas_voucher")[0];
var str_pack_name;

alert(pack_choice);

switch (pack_choice)
{
    case 1:
        str_pack_name = 'text 1';
        alert(str_pack_name);
        break;
    case 2:
        str_pack_name = 'text 2';
        alert(str_pack_name);
        break;
    case 3:
        str_pack_name = 'text 3';
        alert(str_pack_name);
        break;
}

alert(str_pack_name);

if (canvas.getContext)
{
    var ctx = canvas.getContext('2d');

    // Draw shapes
    var img = new Image();
    img.src = 'images/voucher.jpg';

    img.onload = function(){
        ctx.drawImage(img,0,0);
        ctx.fillStyle="#000000";

        ctx.font="bold 25px monospace";
        ctx.fillText(str_pack_name, 600, 120);

        ...draw name...

        ...draw number...
        draw_voucher_img();

        ...jQuery functions...
    }
} else {
    alert('Please update your browser');
}

}

The alert(pack_choice); does give me the passed number. But alert(str_pack_name); gives me undefined message in the alert and draws it on the canvas.

Why is it happening and how do I fix it?

• javascript
• switch-statement

Share Improve this question Follow asked Sep 10, 2013 at 16:26 IgalIgal 6,1032121 gold badges8484 silver badges139139 bronze badges 5

• 1 Is pack_choice being passed into the function as a string or an integer? – Andy Commented Sep 10, 2013 at 16:29
• @Andy I think it's supposed to be integer, but now I'm not sure. The script is taking a value of a radio button <input type="radio" value=3 name="pack" id="rb3"> as follows: var int_pack_choice = $('input[name=pack]:checked').val(); and then the calls for that function: create_voucher(str_visitor_name, unique_num, int_pack_choice);. Is there any way to check if it's a string or an integer? – Igal Commented Sep 10, 2013 at 16:37
• 1 It's a string if you're getting it from an input. I'll add my answer to the list already there :) – Andy Commented Sep 10, 2013 at 16:38
• console.log(pack_choice) should show up with quotes if it's a string. – Jason Nichols Commented Sep 10, 2013 at 16:38
• Or alert(typeof pack_choice); I guess. – Andy Commented Sep 10, 2013 at 16:42

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Just change your switch case statements to identify a string rather than a number:

switch (pack_choice) {
  case '1':
  case '2':
  case '3':
}

and that should fix it.

As Andy said, pack_choice is probably a string, and the switch statement is not matching because it uses strict parison (the types must match too). You can add this before the switch to force your variable into a number:

pack_choice = +pack_choice;

Another solution is to change your case statements to pare to strings, such as case "1", etc.

try this

switch(parseInt(pack_choice))

Try adding pack_choice = pack_choice * 1; to cast it as an integer in the beginning of your function.

switch uses strict equality according to another SO answer. Have not verified myself.