CODEWITHSUNDEEP
javascript
Shivam Amin
Shivam Amin

Reputation: 73

What is wrong with this javascript if statement

Javascript Function to show/hide tabs and iFrames:

function ChangeStep(id)
{
    var i = 1;
    // hide all other tabs:
    while(i<3) {
        var divID = 'tabs' + i;
        if (divID !== null) {
            document.getElementById(divID).className = " hide";
        }
        i++;
    }

    // show this one
    document.getElementById(id).className = " show";
}

if (id == "tab2") {
    document.getElementById(iFrame).className = " iFrame2";
}
else if (id == "tab1") {
    document.getElementById(iFrame).className = " iFrame1";
}

The change of tab works, but the if statement at the bottom doesn't seem to work.

EDIT

The issue is that I have an iFrame with the id of 'iFrame'. Now I made 2 Classes in the css file called: 'iFrame1' and 'iFrame2' which have different settings and which make the iFrame look different. The function above has no problem in changing the 'tabs' (Add the class 'Show' to one and 'Hide' to all others). But it doesn't seem to change the iFrames class to 'iFrame2' and/or 'iFrame1' I can't put it on JSFiddle because my site heavily relies on images, so I'll just link you to where I have it uploaded: www.FeedtheSyrians.com

Upvotes: -1

Views: 129

Answers (4)

Pebbl
Pebbl

Reputation: 35995

You don't seem to be defining the variable iFrame anywhere?

function ChangeStep(id)
{
  var iframeClass, iFrame = '???', divID, i;
  // hide all other tabs:
  for ( i=1; i<3; i++ ) 
  {
    divID = 'tabs' + i;
    if (divID != id) 
    {
      document.getElementById(divID).className = 'hide';
    }
  }
  // show this one
  document.getElementById(id).className = 'show';
  // show the iframe
  switch (id) 
  {
    case 'tab2': iframeClass = 'iFrame2'; break;
    case 'tab1': iframeClass = 'iFrame1'; break;
  }
  if ( iframeClass ) {
    document.getElementById(iFrame).className = iframeClass;
  }
}

Also would you not want different iframes to be hidden and shown when a different tab is used? Rather than just applying a class to a singular iframe? Anyway, just my two cents.

update

From what I've seen of the site you've linked to you should be using this line of code:

document.getElementById('iFrame').className = iframeClass;

Either that or you should define a variable before that, as I've done in my example above, and set iFrame = 'iFrame' rather than '???'.

On an entirely separate note I would avoid using that favicon for your site ;)

update 2

The problem is down to this part:

switch (id) 
{
  case 'tab2': iframeClass = 'iFrame2'; break;
  case 'tab1': iframeClass = 'iFrame1'; break;
}

It seems from looking at your site that you actually need:

switch (id) 
{
  case 'tabs2': iframeClass = 'iFrame2'; break;
  case 'tabs1': iframeClass = 'iFrame1'; break;
}

note the added 's' to make 'tabs1' and 'tabs2'

Upvotes: 1

Scott Selby
Scott Selby

Reputation: 9570

You had 2 problems , the closing bracket for the function was before the if statement , also I dont see anywhere that id is defined. you are getting element by id, but unless it is dfined somwhere else that is probaby the problem

function ChangeStep(id)
{
var i = 1;
// hide all other tabs:
while(i<3) {
    var divID = 'tabs' + i;
    if (divID !== null) {
   document.getElementById(divID).className = " hide";
    }
    i++;
    }

// show this one
document.getElementById(id).className = " show";
//} -- remove this
    if (id == "tab2") {
        document.getElementById(iFrame).className = " iFrame2";
    }
    else if (id == "tab1") {
        document.getElementById(iFrame).className = " iFrame1";
    }
} //add this

Upvotes: 0

Bergi
Bergi

Reputation: 664346

What is wrong with these javascript if statements?

var divID = 'tabs' + i;
if (divID !== null)

It's useless. divID is always a string and never null. You probably wanted to test whether document.getElementById(divID) did return an element or null.

}
if (id == "tab2")

It's outside the function body, and the id variable probably will be undefined.

Better:

function ChangeStep(id) {
    for (var i=1; i<3; i++) {
        var div = document.getElementById('tabs' + i);
        if (div !== null)
            div.className = "show"; // or += " show";
                                    // and didn't you want to hide these?
    }
    // show this one
    document.getElementById(id).className = "show";
    // is the `iFrame` variable defined somewhere?
    if (id == "tab2")
        document.getElementById(iFrame).className = "iFrame2";
    else if (id == "tab1") {
        document.getElementById(iFrame).className = "iFrame1";
}

Upvotes: 0

Lerp
Lerp

Reputation: 3127

Your if statement isn't inside of the function body meaning it is not executed when the function is called.

I don't know when it will be executed. I'm no JS expert and I don't want to make an (educated) guess, maybe someone with more knowledge can say.

Upvotes: 5

Related Questions