Unable to show Div based on If statement

Question

Can anyone please help me to resolve this Javascript issue:

I need to show few div component based on the current website's hostname and need to do this only during the initial load of the Page. I've developed a Javascript code for this but unable to show/hide div components in the desired manner.

The following Javascript code always gives an "Uncaught SyntaxError: Unexpected token else" Error on the console.

<html>
   <head>
       <script>

          var hostName = window.location.host;

          var div1 = document.getElementById('iframePortal');
          var div2 = document.getElementById('iframeNormal');

          If(String(hostName).indexOf('w3schools') !== -1)
          {
          document.getElementById('iframePortal').style.display = 'block';
          document.getElementById('iframeNormal').style.display = 'none';
          }
          else {
          document.getElementById('iframePortal').style.display = 'none';
          document.getElementById('iframeNormal').style.display = 'block';
          }
       </script>
    </head>
    <body>
         <div id="iframeNormal">
             some text 1
         </div>
         <div id="iframePortal">
             another 1


          </div>
        </body>
    </html>

JavaScript is case-sensitive, it has to be a lower-case `if`. Once you fixed this you will have another problem: You are trying to access the elements before they exist. See *[Why does jQuery or a DOM method such as `getElementById` not find the element?](http://stackoverflow.com/q/14028959/218196)* for a solution. — Felix Kling, Jun 02 '13 at 12:12
Tip: You don't need to query DOM each time inside `if` and `else` blocks since you already have `div1` and `div2` in your hand. — Vadim, Jun 02 '13 at 12:42

score 3 · Answer 1 · answered Jun 02 '13 at 12:13

3

use if instead of If like this

if(hostName.indexOf('w3schools') !== -1)

answered Jun 02 '13 at 12:13

Sachin

37,535
7
82
97

score 2 · Answer 2 · answered Jun 02 '13 at 12:30

First thing is js is case sensitive as they told you. 2nd thing is you are trying to access the elements before they are fully loaded. Modify your code to:

<html>
   <head>
    </head>
    <body>
         <div id="iframeNormal">
             some text 1
         </div>
         <div id="iframePortal">
             another 1


          </div>

       <script>

          var hostName = window.location.host;

          var div1 = document.getElementById('iframePortal');
          var div2 = document.getElementById('iframeNormal');

          if(String(hostName).indexOf('w3schools') !== -1)
          {
          document.getElementById('iframePortal').style.display = 'block';
          document.getElementById('iframeNormal').style.display = 'none';
          }
          else {
          document.getElementById('iframePortal').style.display = 'none';
          document.getElementById('iframeNormal').style.display = 'block';
          }
       </script>
      </body>
    </html>

yeah.. I recognized the second issue as soon as I fixed the first one.. Thanks a lot mate for answering this.. I greatly appreciate your help and support :) — user1206, Jun 02 '13 at 12:40

score 0 · Answer 3 · answered Jun 02 '13 at 12:14

0

You have "I" letter in uppercase -> replace it with "i"... so, should be 'if'.

answered Jun 02 '13 at 12:14

sinisake

10,637
2
15
27

score 0 · Answer 4 · answered Jun 02 '13 at 12:54

I would use window.location.hostname instead of window.location.host, also typeof(window.location.hostname) return 'string' so you don't need to wrap hostname in if statement with String

<script>
  var div1 = document.getElementById('iframePortal');
  var div2 = document.getElementById('iframeNormal');

  if(window.location.hostname.indexOf('w3schools') >= 0){
     div1.style.display = 'block';
     div2.style.display = 'none';
  }else{
     div1.style.display = 'none';
     div2.style.display = 'block';
  }
</script>

score 0 · Answer 5 · answered Jun 02 '13 at 14:04

Here is a working jsFiddle: http://jsfiddle.net/rsFPF/

I had to use some css too. Please give it a try.

Don't use jsFiddle? Below is the code:

Html:

<div id='iframeNormal' class='iframes'> some text 1 </div>
<div id='iframePortal' class='iframes'> another 1 </div>

CSS:

.iframes
{
    display: none;
}

javascript:

var div1 = document.getElementById('iframeNormal');
var div2 = document.getElementById('iframePortal');

if (window.location.host.indexOf('w3schools') !== -1)
{
div1.style.display = 'block';
}
else
{
div2.style.display = 'block';
}

Unable to show Div based on If statement

5 Answers5