发表新帖
发表新帖

Javascript Running on JSFiddle but not on a webpage

后端 未结
关注
6 2051
灰色年华
灰色年华 2021-01-26 12:18

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 cha

相关标签:
6条回答
  • 隐瞒了意图╮
    2021-01-26 12:45

    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)
  • 孤城傲影
    2021-01-26 12:46

    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)
  • 再見小時候
    2021-01-26 12:47

    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)
  • 遇见更好的自我
    2021-01-26 12:48

    You seem to be missing <head> tags.

    0 讨论(0)
  • 逝去的感伤
    2021-01-26 13:06

    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)
  • 佛祖请我去吃肉
    2021-01-26 13:06

    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)
 看不清?
提交回复
热议问题