Seemingly Simple - If Else Statement

JavaScript
1

Hello, I am trying to setup a simple “If Else” statement to display a certain div based on a string in the URL.

So if the url is domain.com/source1 display only source1 div
If the url is domain.com/source2 display only source2 div

This is what I have tried to at least show or hide based on one source… haven’t gotten to multiples yet!


<script type="text/javascript">
if(document.URL.indexOf("source1") >= 0){
    document.getElementById('source1').style.display = "block";

} else 
    document.getElementById('source1').style.display = "none";

}
</script>

This is the HTML



<style type="text/css">
 .show {display: block; }
</style>

<div id="source1" class="show">content for source one div....
</div>

Thank you very much in advance for any help you can provide. I have carefully searched this and many other forums to find an answer.

2

missing { after else.

3

You need to look at the document’s location.href to determine if it is source1 or source2. The following script displays one of two divs with the words Source1 or Source2, depending on the location.href value.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Loction Object</title>
<script type=“text/javascript”>
<!–
var s1=document.location.href.indexOf(“source1”);
if(s1 != -1){s1=true;}
window.onload=function()
{ if(s1==true)
{ document.getElementById(“source1”).style.display=“block”; }
else
{ document.getElementById(“source2”).style.display=“block”; }
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; font-size:18px; font-weight:bold; color:#000080; text-align: center; margin-top:3px; margin-left:0px; }
#wrap { position:relative; top:0px; left:0px; width:500px; height:500px; margin:10px auto; border:1px solid #CCC; }
#source1, #source2 { display:none; position:absolute; top:20px; left:20px; width:300px; height:300px; background-color:#FFF; text-align:left; }
–>
</style>
</head>

<body>

<div id=“wrap”>
<div id=“source1”>
Source1
</div>
<div id=“source2”>
Source2
</div>
</div>
<!-- end wrap –>

</body>

</html>