Show specific div based on url - javascript

I need to show a particular div when a button is clicked, only if the url is on a certain members profile. If its not on a profile page show another div that will display an error message. I have written it out extra long because I'm not that great at javascript. I'm having 2 problems with the code below:
1) only the first url will show the correct div not the url after the or (||)?
2) the else code that should show the error message shows up no matter what page you're on?
Please help.
function showdiv() {
if ((window.location.href == "http://google.com/profile/AA") || (window.location.href == "http://google.com/profile/AA/?xg_source=profiles_memberList")) {
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') document.getElementById('AA').style.display = 'block';
else document.getElementById('AA').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/BB") || (window.location.href == "http://google.com/profile/BB/?xg_source=profiles_memberList")) {
document.getElementById('BB').style.display = 'block';
if (document.getElementById('BB').style.display == 'none') document.getElementById('BB').style.display = 'block';
else document.getElementById('BB').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/CC") || (window.location.href == "http://google.com/profile/CC/?xg_source=profiles_memberList")) {
document.getElementById('CC').style.display = 'block';
if (document.getElementById('CC').style.display == 'none') document.getElementById('CC').style.display = 'block';
else document.getElementById('CC').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/DD") || (window.location.href == "http://google.com/profile/DD/?xg_source=profiles_memberList")) {
document.getElementById('DD').style.display = 'block';
if (document.getElementById('DD').style.display == 'none') document.getElementById('DD').style.display = 'block';
else document.getElementById('DD').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/EE") || (window.location.href == "http://google.com/profile/EE/?xg_source=profiles_memberList")) {
document.getElementById('EE').style.display = 'block';
if (document.getElementById('EE').style.display == 'none') document.getElementById('EE').style.display = 'block';
else document.getElementById('EE').style.display = 'block';
}
if ((window.location.href == "http://google.com/profile/FF") || (window.location.href == "http://google.com/profile/FF/?xg_source=profiles_memberList")) {
document.getElementById('FF').style.display = 'block';
if (document.getElementById('FF').style.display == 'none') document.getElementById('FF').style.display = 'block';
else document.getElementById('FF').style.display = 'block';
}
else {
document.getElementById('error').style.display = 'block';
if (document.getElementById('error').style.display == 'none') document.getElementById('error').style.display = 'block';
else document.getElementById('error').style.display = 'block';
}
}

That code will be a nightmare to maintain. You might have better luck structuring it more like this:
function getId() {
var href = window.location.href;
if (href.indexOf('?') != -1) {
//remove any url parameters
href = href.substring(0, href.indexOf('?'));
}
if (href.charAt(href.length - 1) == '/') {
//check for a trailing '/', and remove it if necessary
href = href.substring(0, href.length - 1);
}
var parts = href.split("/");
return parts[parts.length - 1]; //last array element should contain the id
}
function showdiv(){
var id = getId();
var elem = document.getElementById(id);
if (elem) {
if (elem.style.display == 'none') {
elem.style.display = 'block';
}
else {
elem.style.display = 'none';
}
}
else {
if (document.getElementById('error').style.display == 'none') {
document.getElementById('error').style.display='block';
}
else {
document.getElementById('error').style.display='none';
}
}
}

You should work out the logic first.
This code makes no sense at all.
document.getElementById('AA').style.display = 'block';
if (document.getElementById('AA').style.display == 'none') {
document.getElementById('AA').style.display = 'block';
}
else {
document.getElementById('AA').style.display = 'block';
}
Structurally, it is similar to this code (simplified and with comments)
var a = 'block';
// this if will never be true, because we just set a to "block"
if (a == 'none') {
a = 'block';
}
// this else will always execute and set a to "block" again.
// something that was already done in the first line.
else {
a = 'block';
}
Also try to factor our the repeating parts of your code as #aroth has nicely demonstrated.

Related

For some reason cannot click a button twice

this is my first ever question and would really appreciate you guys' help. I am getting this error everytime I click a button twice. Uncaught TypeError: (document.getElementById(...).style.display == "block") is not a function
This is my JS code--
document.getElementById("HTML").addEventListener("click", function(){
if (document.getElementById("CSScontent").style.display == 'block')
(document.getElementById("Imgcontent").style.display == 'block')
(document.getElementById("SVGcontent").style.display == 'block'); {
document.getElementById("CSScontent").style.display = 'none';
document.getElementById("Imgcontent").style.display = 'none';
document.getElementById("SVGcontent").style.display = 'none';
document.getElementById("HTMLcontent").style.display = 'block';
}
}
);
document.getElementById("CSS").addEventListener("click", function(){
if (document.getElementById("HTMLcontent").style.display == 'block')
(document.getElementById("Imgcontent").style.display == 'block')
(document.getElementById("SVGcontent").style.display == 'block'); {
document.getElementById("HTMLcontent").style.display = 'none';
document.getElementById("Imgcontent").style.display = 'none';
document.getElementById("SVGcontent").style.display = 'none';
document.getElementById("CSScontent").style.display = 'block';
}
}
);
document.getElementById("IMG").addEventListener("click", function(){
if (document.getElementById("HTMLcontent").style.display == 'block')
(document.getElementById("CSScontent").style.display == 'block')
(document.getElementById("SVGcontent").style.display == 'block'); {
document.getElementById("HTMLcontent").style.display = 'none';
document.getElementById("CSScontent").style.display = 'none';
document.getElementById("SVGcontent").style.display = 'none';
document.getElementById("Imgcontent").style.display = 'block';
}
}
);
document.getElementById("SVG").addEventListener("click", function(){
if (document.getElementById("HTMLcontent").style.display == 'block')
(document.getElementById("CSScontent").style.display == 'block')
(document.getElementById("Imgcontent").style.display == 'block'); {
document.getElementById("HTMLcontent").style.display = 'none';
document.getElementById("CSScontent").style.display = 'none';
document.getElementById("Imgcontent").style.display = 'none';
document.getElementById("SVGcontent").style.display = 'block';
}
}
);
end everytime I click a button twice it gives me the error. I have tried everything I could to solve this but still no progress.
Thanks!
This is because you are using another parenthesis i.e. (...) after the first one for the if clause i.e. if(...)(...)(...)
Which tries to run the first parenthesis clause (...) as a function, which is not a function but a statement
You should use binary logical operators like && || between these conditions like (...) || (...) || (...)
Also, remove the semi-colon ; before the first if brace (curly bracket {...})
So, you can try something like
// Example code for `HTML` will be the same for all others i.e. CSS, IMG, SVG
document.getElementById("HTML").addEventListener("click", function(){
if (
document.getElementById("CSScontent").style.display == 'block' ||
document.getElementById("Imgcontent").style.display == 'block' ||
document.getElementById("SVGcontent").style.display == 'block'
) {
document.getElementById("CSScontent").style.display = 'none';
document.getElementById("Imgcontent").style.display = 'none';
document.getElementById("SVGcontent").style.display = 'none';
document.getElementById("HTMLcontent").style.display = 'block';
}
});

javascript, Display text when pusing button (multiple buttons) but only one text at the time

I'm using this javascript to display text when clicking a button in a website:
<script type="text/javascript">
function toggleMe(a)
{
var e=document.getElementById(a);
if(!e)return true;
if(e.style.display=="none")
{e.style.display="block"}
else
{e.style.display="none"}
return true;
}
</script>
and i'm calling the script with <A Onclick="return toggleMe('content')" >[Website Content]</A>
The problem is that i have three "buttons" (help, gpgkey, content) and i would like that only one text be displayed at the time. I've never done java before and Im not even sure of totally understanding the first code.
This is one of my attempts
<script type="text/javascript">
function toggleMe(a)
{
var e=document.getElementById(a);
if(!e)return true;
if(e==document.getElementById("content")
{
var f=document.getElementById("help");
var g=document.getElementById("gpgkey");
}
if(e==document.getElementById("help")
{
var f=document.getElementById("content");
var g=document.getElementById("gpgkey");
}
if(e==document.getElementById("gpgkey")
{
var f=document.getElementById("content");
var g=document.getElementById("help");
}
if(e.style.display=="none")
{
e.style.display="block"
if(f.style.display!="none")
{f.style.display="none"}
if(g.style.display!="none")
{g.style.display="none"}
}
else
{e.style.display="none"}
return true;
}
function toggleMe(a) {
var eContent = document.getElementById("content"),
eHelp = document.getElementById("help"),
eGPGKey = document.getElementById("gpgkey");
if(!eContent || !eHelp || !eGPGKey)
return;
if (a === "content" && eContent.style.display === "none") {
eContent.style.display = "block";
eHelp.style.display = "none";
eGPGKey.style.display = "none";
}
else if (a === "help" && eHelp.style.display === "none") {
eContent.style.display = "none";
eHelp.style.display = "block";
eGPGKey.style.display = "none";
}
else if (a === "gpgkey" && eGPGKey.style.display === "none") {
eContent.style.display = "none";
eHelp.style.display = "none";
eGPGKey.style.display = "block";
}
else if (a === "content") {
eContent.style.display = "none";
}
else if (a === "help") {
eHelp.style.display = "none";
}
else if (a === "gpgkey") {
eGPGKey.style.display = "none";
}
}
http://jsfiddle.net/Z68p7/

Displaying Div's based on URL using Javascript

I’m new to Javascript and I’m having trouble displaying and hiding some divs based on url’s.
I have 4 divs that need to be shown depending on the url.
The 4 divs are:
Div 1
<body onload="callOnPageLoad1()”>
<div id="homeName" style="display:block"><h5>HOME</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/
Div 2
<body onload="callOnPageLoad2()”>
<div id="profilesName" style="display:block"><h5>PROFILES</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Profiles
Div 3
<body onload="callOnPageLoad3()”>
<div id="retailName" style="display:block"><h5>RETAIL</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Retail
Div 4
<body onload="callOnPageLoad4()”>
<div id="blogName" style="display:block"><h5>BLOG</h5></div>
and needs to be displayed only when at:
http://www.fitzofdesign.com/?category=Blog
The JS I’m using is:
<script type="text/javascript">
function callOnPageLoad1()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/")
{
document.getElementById('homeName').style.display = 'block';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('homeName').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad2()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Profiles")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'block';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('profilesNamed').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad3()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Retail")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'block';
document.getElementById('blogName').style.display = 'none';
}
else {
document.getElementById('retailName').style.display = 'none';
}
}
</script>
<script type="text/javascript">
function callOnPageLoad4()
{
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/?category=Blog")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'block';
}
else {
document.getElementById('blogName').style.display = 'none';
}
}
</script>
At present the only time this is working correctly is when I’m at:
http://www.fitzofdesign.com/
because Div 1 appears and the other 3 Divs are hidden.
This is not working when I’m at:
http://www.fitzofdesign.com/?category=Profiles
http://www.fitzofdesign.com/?category=Retail
http://www.fitzofdesign.com/?category=Blog
because Div 2, 3 & 4 are all incorrectly displaying for each URL.
I hope this makes sense.
Can anyone help please?
Thanks Rowan
You need to combine all those functions into something like:
var url = window.location.href;
if(url == "http://www.fitzofdesign.com/")
{
document.getElementById('homeName').style.display = 'block';
document.getElementById('profilesNamed').style.display = 'none';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
else if(url == "http://www.fitzofdesign.com/?category=Profiles")
{
document.getElementById('homeName').style.display = 'none';
document.getElementById('profilesNamed').style.display = 'block';
document.getElementById('retailName').style.display = 'none';
document.getElementById('blogName').style.display = 'none';
}
And you need to make sure this check is called after everything loads, so put inside something like a jquery document.ready:
$(document).ready(function() {
var url = window.location.href
// rest of the code
}
Also, you might want to change the checks from:
url == "http://www.fitzofdesign.com/?category=Profiles"
to
url.indexOf("category=Profiles") > -1
Hope that helps
Firstly hide all the divs.
On window.onLoad event, fetch the querystring value and use that to display the appropriate div.
Below is the code snippet to extract the querystring category value.
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Ok first, you don't need to put each of those in their own script tags. Keep them together.
Second, save stuff you repeat in JS as variables for performance and cleaner code:
var url = window.location.href,
fitz = "http://www.fitzofdesign.com/"
home = document.getElementById('homeName'),
profile = document.getElementById('profilesNamed'),
retail = document.getElementById('retailName').style.display,
blog = document.getElementById('blogName').style.display;
Third, you can check variables against each other:
if( url == fitz ) {
home.style.display = 'block';
profile.style.display = 'none';
retail.style.display = 'none';
blog.style.display = 'none';
}
else if ( url == fitz + "?category=Profiles" ) {
home.style.display = 'none';
profile.style.display = 'block';
retail.style.display = 'none';
blog.style.display = 'none';
}
else if ( url == fitz + "?category=Profiles" ) {
// etc.
}
Finally, you need to create an event listener that will determine when a click or some other user behavior occurs. That should trigger this function each time.
Look up addEventListener

function undefined error on show hide a div

i am trying to show and hide a div on click of a checkbox but it shows an error of checktwelve or checkten is undefined.please help me out here
function hided2(checkten) {
if (checkten.checked == true) {
document.getElementById("d2").style.display = 'block';
document.getElementById("d1").style.display = 'none';
checktwelve.checked = false;
}
else {
document.getElementById("d2").style.display = 'none';
document.getElementById("d1").style.display = 'block';
checktwelve.checked = true;
}
}
function hided1(checktwelve) {
if (checktwelve.checked == true) {
document.getElementById("d1").style.display = 'block';
document.getElementById("d2").style.display = 'none';
checkten.checked = false;
}
else {
document.getElementById("d1").style.display = 'none';
document.getElementById("d2").style.display = 'block';
checkten.checked = true;
}
}
and i made Onclick="hided1(checktwelve)" on checktwelve and likewise on other
checkten and checktwelve are id of checkboxes
checktwelve or checkten is undefined
You haven't defined these variables.
Onclick="hided1(checktwelve)"
tries to find checktwelve in global scope and can't find it.

Alter Header Label for Show/Hide Javascript

http://jsfiddle.net/YaMhn/8/
^^^^Take a look and see if you can help solve this
Ok so I added the label showhide to my script
function showHide(lbl)
{
if(document.getElementById('mydiv').style.display == "none")
{
lbl.innerHTML="Hide";
document.getElementById('mydiv').style.display="";
}
else
{
lbl.innerHTML="Show";
document.getElementById('mydiv').style.display="none";
}
}
function showhide(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
obj.style.display = "none";
} else {
obj.style.display = "";
}
}
}
function hide(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "none") {
obj.style.display = "none";
} else {
obj.style.display = "none";
}
}
}
function hideall(id1,id2,id3,id4) {
var status1 = document.getElementById(id1).style.display;
var status2 = document.getElementById(id2).style.display;
var status3 = document.getElementById(id3).style.display;
var status4 = document.getElementById(id4).style.display;
if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
hide(id1); hide(id2); hide(id3); hide(id4); return;
}
if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
hide(id1); hide(id2); hide(id3); hide(id4); return;
}
}
function show(id) {
if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
obj.style.display = "";
} else {
obj.style.display = "";
}
}
}
function showall(id1,id2,id3, id4) {
var status1 = document.getElementById(id1).style.display;
var status2 = document.getElementById(id2).style.display;
var status3 = document.getElementById(id3).style.display;
var status4 = document.getElementById(id4).style.display;
if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
show(id1); show(id2); show(id3); show(id4); return;
}
if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
show(id1); show(id2); show(id3); show(id4); return;
}
}
Here is my Header code:
Header #1: (titled Runway Information Click to Expand/Close)
<div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id1'); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong> Runway Information</strong></font></td><td align=right><div id='mydiv' style='display:none'></div></td></tr></table></div>
The Header works prefectly, shows and hides just as I coded. But I want it to say "Show" when hidden and "Hide" when shown.
Previously it was written like this:
Click to Expand/Close
The problem is the new showHide(lbl) does not work as intended.
What do I need to change?
It is simple -- use innerHTML:
style.display="block"
innerHTML="click here to expand"
and to hide:
style.display="hide"
innerHTML="click here to close"
The only change I made was else to else if, and it is now fixed.
http://jsfiddle.net/YaMhn/18/
Thank You Ashraf for the help. I would upvote you but I only have a 13 rep lol.
I made you an example : http://jsfiddle.net/YaMhn/

Categories

Resources