Question

好的，所以我有一个代码可以显示基于下拉选择的不同形式
这是the fiddle到那个..

好吧它总是给我Test1，这意味着它没有改变div显示，它正在JSFiddle上工作但不在网页上。这是我的网页标记

<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>

Answer 1

这是因为在小提琴中，您的代码设置为在onLoad运行，但在您的代码中，它在创建DOM之前运行。

将您的代码包装成window.onload这样的事件：

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';
    };
};

无论如何，就像记住@positivew一样，你的代码错过了<head>标签。将JS脚本放在其中是否在语义上是正确的。

Answer 2

当问题出现works in jsfiddle and not on webpage时，最好的办法是查看小提琴页面的来源。

你的小提琴来源如下：

<!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>

直接粘贴上面的代码，它会起作用。

直接粘贴代码后，您可以从小提琴中删除不必要的行，如下所示：

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

Answer 3

您需要一个onload函数，以便在加载HTML后运行代码。试试这个：

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';
    };
}

您还可以在正文标记结束之前在所有HTML之后添加代码。

请注意，在您的帖子中，您缺少<head>个标签。

Answer 4

您似乎缺少<head>标签。

Answer 5

Jsfiddle运行window对象的脚本.onload，但没有意识到。这允许您的脚本暂停执行，直到DOM准备好被操作。

要让它在您自己的环境中工作，您可以：

将整个脚本放在您尝试操作的HTML之后（例如，<body>的结尾）

将代码保留在<body>之上并运行窗口对象的onload，例如

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';
    };
 }

Answer 6

页面从上到下加载到DOM中。

在DOM中存在标识为document.getElementById('options').onchange的元素之前，正在调用options。

如果你把你的脚本放在div下面，它会起作用，因为div在调用脚本之前就已存在了。

Javascript在JSFiddle上运行但不在网页上运行

6 个答案: