Javascript Running on JSFiddle but not on a webpag

2019-03-05 23:33发布

站内问答 / JavaScript
1246 6 6

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>

6条回答
霸刀☆藐视天下
2楼-- · 2019-03-05 23:41

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">
查看更多
0人赞 添加讨论(0) 举报
Lonely孤独者°
3楼-- · 2019-03-05 23:41

You seem to be missing <head> tags.

查看更多
0人赞 添加讨论(0) 举报
啃猪蹄的小仙女
4楼-- · 2019-03-05 23:43

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.

查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
5楼-- · 2019-03-05 23:46

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.

查看更多
0人赞 添加讨论(0) 举报
Animai°情兽
6楼-- · 2019-03-05 23:54

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.

查看更多
0人赞 添加讨论(0) 举报
相关推荐>>
7楼-- · 2019-03-06 00:04

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';
    };
 }
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)