CODEWITHSUNDEEP
javascripthtmljsfiddle
geekybedouin
geekybedouin

Reputation: 559

Javascript Running on JSFiddle but not on a webpage

Ok so I have a code that would show different forms based on dropdown selection
Here's the fiddle to that..

Well its always giving me Test1 which means its not changing the div display, it's working on JSFiddle but not on the webpage.. and here's my webpage markup

<html>
<body>

<style>
.hidden {
    display: none;   
}    

</style>

<script type='text/javascript'>

              document.getElementById('options').onchange = function() {
    var i = 1;
    var myDiv = document.getElementById(i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById(++i);
    }
    document.getElementById(this.value).style.display = 'block';
};

             </script>
<select name="options" id="options">
  <option value="1"> Display </option>
  <option value="2">Wka</option>
</select>

<div id="1" class="hidden" style="display: block">Test 1</div>
<div id="2" class="hidden">Test 2</div>

</body>
</html>

Upvotes: 0

Views: 511

Answers (6)

KellyCode
KellyCode

Reputation: 797

The page is loaded into the DOM from the top down.

Your document.getElementById('options').onchange is being called before the element with id options exists in the DOM.

If you put your script below the divs, it'll work because the divs are now there before the script is called.

Upvotes: 0

412
412

Reputation: 1428

Jsfiddle is running your script .onload of the window object, without you realizing it. This allows your script to pause on execution until the DOM is ready to be manipulated.

To have it work in your own environment, you can:

  1. Place the entire script after the HTML you're trying to manipulate (e.g. end of the <body>)

  2. Leave your code above the <body> and run it onload of the window object, e.g.

    window.onload = function () {
    document.getElementById('options').onchange = function () {
        var i = 1;
        var myDiv = document.getElementById(i);
        while (myDiv) {
            myDiv.style.display = 'none';
            myDiv = document.getElementById(++i);
        }
        document.getElementById(this.value).style.display = 'block';
    };
 }

Upvotes: 0

Zword
Zword

Reputation: 6793

The best thing to do when such problem comes works in jsfiddle and not on webpage is to see the source of the fiddle page.

Your source of the fiddle appears as:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='/js/lib/dummy.js'></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

  <style type='text/css'>
    .hidden 
    {
    display: none;   
    }    

  </style>

  <script type='text/javascript'>//<![CDATA[ 
  window.onload=function(){
  document.getElementById('options').onchange = function()
  {
    var i = 1;
    var myDiv = document.getElementById(i);
    while(myDiv) 
    {
        myDiv.style.display = 'none';
        myDiv = document.getElementById(++i);
    }
    document.getElementById(this.value).style.display = 'block';
  };

   }//]]>  

  </script>
  </head>
  <body>
    <select name="options" id="options">
    <option value="1"> Test1 </option>
    <option value="2">Test2</option>
    </select>

  <div id="1" class="hidden" style="display: block">Test 1</div>
  <div id="2" class="hidden">Test 2</div>
  </body>
  </html>

Paste the above code directly and it will work.

After pasting the code directly then you can remove unncecessary lines like below from the fiddle:

<script type='text/javascript' src='/js/lib/dummy.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

Upvotes: 2

Sergio
Sergio

Reputation: 28837

You need a onload function so your code is run after your HTML is loaded. Try this:

window.onload = function () {
    document.getElementById('options').onchange = function () {
        var i = 1;
        var myDiv = document.getElementById(i);
        while (myDiv) {
            myDiv.style.display = 'none';
            myDiv = document.getElementById(++i);
        }
        document.getElementById(this.value).style.display = 'block';
    };
}

You can also add the code after all your HTML, before the end of the body tag.

And note that in your post you are missing <head> tags.

Upvotes: 1

positivew
positivew

Reputation: 750

You seem to be missing <head> tags.

Upvotes: 0

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

That is because in the fiddle your code is set to run at onLoad, but in your code its running before the DOM is created.

Wrap your code into a window.onload event like this:

window.onload = function()
{
    document.getElementById('options').onchange = function() {
        var i = 1;
        var myDiv = document.getElementById(i);
        while(myDiv) {
            myDiv.style.display = 'none';
            myDiv = document.getElementById(++i);
        }
        document.getElementById(this.value).style.display = 'block';
    };
};

Anyway, like @positivew remembered, your code misses the <head> tag. Is semantically correct to put your JS scripts inside it.

Upvotes: 6

Related Questions