CODEWITHSUNDEEP
javascriptfunctionsyntax
RichieAHB
RichieAHB

Reputation: 2088

Javascript Function Problem

I tend to write my javascript as big blocks of code without many variable or functions but have decided to clean up my act! Below is an attempt at writing a cleaner version of a script that hides certain form elements depending on the value of a drop down box.

The script worked perfectly before I tried to tidy it up but now I cannot see where the problem is? Could anyone advise me of any problems with my syntax here. Apologies for the very specific post.

Thanks,

Rich

function hideTitle(hide){
    if(hide = "true"){
        document.admin.title.style.display="none";
        document.getElementById("titleText").style.display="none";
    };
    else if(hide = "false"){
        document.admin.title.style.display="inline";
        document.getElementById("titleText").style.display="inline";
    };
};

function hideSocMedLinks(hide){
    if(hide = "true"){
        document.admin.facebookLink.style.display="none";
        document.admin.twitterLink.style.display="none";
        document.getElementById("fbtext").style.display="none";
        document.getElementById("twittext").style.display="none";
    };
    else if(hide = "false"){
        document.admin.facebookLink.style.display="block";
        document.admin.twitterLink.style.display="block";
        document.getElementById("fbtext").style.display="inline";
        document.getElementById("twittext").style.display="inline";
    };
};

function hideWebLink(hide){
    if(hide = "true"){
        document.admin.webLink.style.display="none";
        document.getElementById("webtext").style.display="none";
    };
    else if(hide = "false"){
        document.admin.webLink.style.display="block";
        document.getElementById("webtext").style.display="inline";
    };
};

function toggleFormElements(){
    if(document.admin.pageType.options[document.admin.pageType.selectedIndex].value == "homePage"){
        hideTitle("true");
        hideSocMedLinks("true");
        hideWebLink("true");
    };
    else if(document.admin.pageType.options[document.admin.pageType.selectedIndex].value == "socialMedia"){
        hideTitle("false");
        hideSocMedLinks("false");
        hideWebLink("true");
    };
    else if(document.admin.pageType.options[document.admin.pageType.selectedIndex].value == "webDesign"){
        hideTitle("false");
        hideSocMedLinks("true");
        hideWebLink("false");
    };
};

Upvotes: -1

Views: 434

Answers (6)

Zikes
Zikes

Reputation: 5886

As others have mentioned, the semicolons (;) after the closing braces (}) before each else should be removed, but one other problem I can see is that you're using a single equals inside your if statements. In Javascript a single equals sign will always attempt assign to the left hand side. What you want for comparisons is double or triple equals (== or ===).

Upvotes: 1

Adam Crossland
Adam Crossland

Reputation: 14213

You need to use double equals (==) to test for equality. The single equals that is currently in your if statements will assign the value that you think you are testing for and evaluate to true. In other words, for almost all values of 'hide' the if will execute, not just the value "true".

function hideSocMedLinks(hide){
    if(hide == "true"){
        document.admin.facebookLink.style.display="none";
        document.admin.twitterLink.style.display="none";
        document.getElementById("fbtext").style.display="none";
        document.getElementById("twittext").style.display="none";
    }
    else if(hide == "false"){
        document.admin.facebookLink.style.display="block";
        document.admin.twitterLink.style.display="block";
        document.getElementById("fbtext").style.display="inline";
        document.getElementById("twittext").style.display="inline";
    }
}

Upvotes: 2

Michael Berkowski
Michael Berkowski

Reputation: 270767

Remove the semicolon after the closing } in all your if / else blocks. Also, are you passing the boolean value true/false to your function or are you passing the string "true"/"false"?

// This is incorrect
if (stuff) {
  // stuff
};
else if {
  // etc...
};

// Should be
if (stuff) {
  // stuff
}
else if {
  // etc...
}

Upvotes: 1

chills42
chills42

Reputation: 14533

Removing the unnecessary semi-colons should solve the issue.

function hideTitle(hide){
    if(hide = "true"){
        document.admin.title.style.display="none";
        document.getElementById("titleText").style.display="none";
    }
    else if(hide = "false"){
        document.admin.title.style.display="inline";
        document.getElementById("titleText").style.display="inline";
    }
}

function hideSocMedLinks(hide){
    if(hide = "true"){
        document.admin.facebookLink.style.display="none";
        document.admin.twitterLink.style.display="none";
        document.getElementById("fbtext").style.display="none";
        document.getElementById("twittext").style.display="none";
    }
    else if(hide = "false"){
        document.admin.facebookLink.style.display="block";
        document.admin.twitterLink.style.display="block";
        document.getElementById("fbtext").style.display="inline";
        document.getElementById("twittext").style.display="inline";
    }
}

function hideWebLink(hide){
    if(hide = "true"){
        document.admin.webLink.style.display="none";
        document.getElementById("webtext").style.display="none";
    }
    else if(hide = "false"){
        document.admin.webLink.style.display="block";
        document.getElementById("webtext").style.display="inline";
    }
}

function toggleFormElements(){
    if(document.admin.pageType.options[document.admin.pageType.selectedIndex].value == "homePage"){
        hideTitle("true");
        hideSocMedLinks("true");
        hideWebLink("true");
    }
    else if(document.admin.pageType.options[document.admin.pageType.selectedIndex].value == "socialMedia"){
        hideTitle("false");
        hideSocMedLinks("false");
        hideWebLink("true");
    }
    else if(document.admin.pageType.options[document.admin.pageType.selectedIndex].value == "webDesign"){
        hideTitle("false");
        hideSocMedLinks("true");
        hideWebLink("false");
    }
}

Upvotes: 2

SLaks
SLaks

Reputation: 888185

You shouldn't put ;s after code blocks.

In particular, the ;s after your ifs end the if blocks, causing the elses to be unattached.

Upvotes: 1

Rion Williams
Rion Williams

Reputation: 76597

You have semi-colons (;) after your if statements - that could be the cause of your syntax issues. See the arrows below:

function hideTitle(hide){
    if(hide = "true"){
        document.admin.title.style.display="none";
        document.getElementById("titleText").style.display="none";
    }; <----
    else if(hide = "false"){
        document.admin.title.style.display="inline";
        document.getElementById("titleText").style.display="inline";
    }; <----
};

Upvotes: 2

Related Questions