javascript - IE bug with global variables. How to bypass this bug? - Stack Overflow

admin管理员组

文章数量:1391989

As title says i have some problems with IE8 and Javascript. It's known about its bug in interpretation of global variables: simply it does not get them if you don't declare as:

var variable1 = something;

The problem it's i'm trying to make a script that change the body background clicking on a button and i need a global variable wrapping the actual status (what bg-x.png i'm loading). This script work on FF, Safari and Chrome but not, obviously, on IE. Help? (the problem is on the variable "status")

$('#change').click(function() {
    var numStates = 2;
    var name = $(this).text();

    if(!(status)) {
        status = parseInt(1,10);
    }

    if(status<numStates) {
        status = parseInt(status,10) + 1;
    }
    else {
     status = parseInt(1,10);
    }


    alert(status);


    var bgvar = null;

    switch(parseInt(status,10)) {
        case 1: var bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat';
        var name = 'Pattern';
        break;
        case 2: var bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat-x';
        var name = 'Sfumato';
        break;
        default: alert('Default');
    }

    $('body').css({
        background:bgvar,
    });

    $(this).text(name);


}
);

Working code even with IE (Thanks to Zeta):

$('#change').click(function() {
   var numStates = 2;
   var name = $(this).text();

// If data-status isn't defined set it to the initial value
if($('body').data('status') === undefined)
    $('body').data('status',1);

// Extract the status
var status = parseInt($('body').data('status'),10);

// Handle the status
if(status < numStates)
    status++;
else
    status = 1;

// Save the status
$('body').data('status',status);




    switch(status) {
        case 1: bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat';
        name = 'Pattern';
        break;
        case 2: bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat-x';
        name = 'Sfumato';
        break;
        default: alert('Default');
    }

    $('body').css({
        background:bgvar,
    });

    $(this).text(name);


}
);

As title says i have some problems with IE8 and Javascript. It's known about its bug in interpretation of global variables: simply it does not get them if you don't declare as:

var variable1 = something;

The problem it's i'm trying to make a script that change the body background clicking on a button and i need a global variable wrapping the actual status (what bg-x.png i'm loading). This script work on FF, Safari and Chrome but not, obviously, on IE. Help? (the problem is on the variable "status")

$('#change').click(function() {
    var numStates = 2;
    var name = $(this).text();

    if(!(status)) {
        status = parseInt(1,10);
    }

    if(status<numStates) {
        status = parseInt(status,10) + 1;
    }
    else {
     status = parseInt(1,10);
    }


    alert(status);


    var bgvar = null;

    switch(parseInt(status,10)) {
        case 1: var bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat';
        var name = 'Pattern';
        break;
        case 2: var bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat-x';
        var name = 'Sfumato';
        break;
        default: alert('Default');
    }

    $('body').css({
        background:bgvar,
    });

    $(this).text(name);


}
);

Working code even with IE (Thanks to Zeta):

$('#change').click(function() {
   var numStates = 2;
   var name = $(this).text();

// If data-status isn't defined set it to the initial value
if($('body').data('status') === undefined)
    $('body').data('status',1);

// Extract the status
var status = parseInt($('body').data('status'),10);

// Handle the status
if(status < numStates)
    status++;
else
    status = 1;

// Save the status
$('body').data('status',status);




    switch(status) {
        case 1: bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat';
        name = 'Pattern';
        break;
        case 2: bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat-x';
        name = 'Sfumato';
        break;
        default: alert('Default');
    }

    $('body').css({
        background:bgvar,
    });

    $(this).text(name);


}
);

• javascript
• jquery
• internet-explorer

Share Improve this question Follow edited Apr 21, 2012 at 10:47 rdbisme asked Apr 21, 2012 at 10:19 rdbismerdbisme 87711 gold badge1515 silver badges4141 bronze badges 5

• 2 1) Post the code containing the declaration of "status" and where is it declared. 2) Have you tried changing variable name? Maybe "status" is somehow a reserved IE8 keyword, don't know... Actually status is on this list of reserved JS keywords: javascripter/faq/reserved.htm – XCS Commented Apr 21, 2012 at 10:23
• 2 Global variables are never needed. – Lucero Commented Apr 21, 2012 at 10:26
• @cristy status is declared in that code block. – Rory McCrossan Commented Apr 21, 2012 at 10:26
• I found two erros in my code. The first about the variable name (that as Cristy suggests it's reserved) and one in checking if "status" was defined. i'm editing with the correct code. Anyway @Lucero how can i avoid using global variable? – rdbisme Commented Apr 21, 2012 at 10:34
• There are many ways to avoid them, Zeta has posted one of the solutions for that. The mon way is to use a closure. – Lucero Commented Apr 21, 2012 at 10:35

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

status is a predefined member of the window-object and points to the content of the statusbar. Use another variable-name

Since you're already using jQuery you could use .data() instead of global variables:

$('#change').click(function() {
    var numStates = 2;
    var name = $(this).text();

    // If data-status isn't defined set it to the initial value
    if($('body').data('status') === undefined)
        $('body').data('status',1);

    // Extract the status
    var status = parseInt($('body').data('status'),10);

    // Handle the status
    if(status < numStates)
        status++;
    else
        status = 1;

    // Save the status
    $('body').data('status',status);

    /* ... Rest of your code ... */

Note that this won't work in XML documents in IE (according to the jQuery doc).

Do you know when to use »var«? I just cleaned your code in the follwing ways:

1. Add "var status;" to make it a local variable
2. Delete "var" for already defined variables in your switch statement

3. Delete the unnecessary ma behind "background: bgvar" which will cause errors in IE

   $('#change').click(function () {
           var numStates = 2;
           var name = $(this).text();
           var status;
   
           if (!(status)) {
                   status = parseInt(1, 10);
           }
   
           if (status < numStates) {
                   status = parseInt(status, 10) + 1;
           } else {
                   status = parseInt(1, 10);
           }
   
   
           alert(status);
   
   
           var bgvar = null;
   
           switch (parseInt(status, 10)) {
           case 1:
                   bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat';
                   name = 'Pattern';
                   break;
           case 2:
                   bgvar = ' #7097ab url(./img/bg-' + status + '.png) top center repeat-x';
                   name = 'Sfumato';
                   break;
           default:
                   alert('Default');
           }
   
           $('body').css({
                   background: bgvar
           });
   
           $(this).text(name);
   
   
   });
   

Does it work now?

P.S. Use http://www.jshint./ to prevent those kind of errors.

本文标签： javascriptIE bug with global variables How to bypass this bugStack Overflow