Fatal编程技术网
  • javascript/
  • 在JSFIDLE上运行但不在网页上运行的Javascript

在JSFIDLE上运行但不在网页上运行的Javascript

javascript html

在JSFIDLE上运行但不在网页上运行的Javascript,javascript,html,jsfiddle,Javascript,Html,Jsfiddle,好的，我有一个代码，可以根据下拉选择显示不同的表单 祝你 它总是给我Test1，这意味着它没有改变div的显示，它在JSFiddle上工作，但不在网页上。。 这是我的网页标记 <html> <body> <style> .hidden { display: none; } </style> <script type='text/javascript'> document.getE

好的，我有一个代码，可以根据下拉选择显示不同的表单 祝你

它总是给我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>
这是因为在fiddle中，您的代码被设置为以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';
    };
};
不管怎样，就像@positiveew所记得的那样，您的代码遗漏了标记。将JS脚本放入其中在语义上是正确的。

您似乎缺少标记。

您需要一个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之后，在body标记的末尾之前添加代码

请注意，在您的帖子中缺少标记。

Jsfiddle正在运行窗口对象的脚本，您没有意识到它。这允许脚本在执行时暂停，直到DOM准备好进行操作为止

要使其在您自己的环境中工作，您可以：

将整个脚本放在您试图操作的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';
    };
 }
当出现这种问题时，最好的办法是在JSFIDLE中工作，而不是在网页上，查看FIDLE页面的源代码

您的小提琴来源显示为：

<!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">
页面从上到下加载到DOM中

在DOM中存在id为options的元素之前，正在调用document.getElementById'options'

如果您将脚本放在div下面，它将起作用，因为在调用脚本之前div已经存在。

这是正确的，但不是问题所在。