Question

我有这个页面。

如果我将其保存为html和标签中的所有js代码

但是当我把代码放在jsfiddle.com的js部分的脚本标签中时，它就不会加载。

代码：

<html>
  <head>
    <script>
    var selele=0;
    var brindex=0;
   function addSelectBox ()
        {

    selele=selele+1;
    var spantag = document.createElement ("span");
        spantag.setAttribute("id",selele);

    var parentDiv = document.getElementById ("main");
        var selectElement = document.createElement ("select");  
    var selectElement1 = document.createElement ("select");   
    var selectElement2= document.createElement ("select");    
    var selectElement3 = document.createElement ("select");  

        var arr=new Array("Stocks","MutualFunds");
        var arr2=new Array("individual","401k","IRA");
        var arr3=new Array("contains","equals");
        var arr4=new Array("scrapedaccounttype","scrapedtransactiontype");
        var textbox = document.createElement('input');

        for(var i=0;i<arr.length;i++)
        {
        var option = new Option (arr[i]);           
        selectElement.options[selectElement.options.length] = option;


        }


        for(var i=0;i<arr2.length;i++)
        {
        var option = new Option (arr2[i]);          
        selectElement1.options[selectElement1.options.length] = option;


        }

        for(var i=0;i<arr3.length;i++)
        {
        var option = new Option (arr3[i]);          
        selectElement2.options[selectElement2.options.length] = option;


        }
        for(var i=0;i<arr4.length;i++)
        {
        var option = new Option (arr4[i]);          
        selectElement3.options[selectElement3.options.length] = option;


        }



spantag.appendChild (selectElement);
spantag.appendChild (selectElement1);
spantag.appendChild (selectElement2);
spantag.appendChild (selectElement3);   
spantag.appendChild (textbox);  


parentDiv.appendChild (spantag);
linebreak();

       }

       function removeSelect()
      {
         var parentDiv = document.getElementById ("main");
         var removetg = document.getElementById (selele);
         if(selele!=1)
        {
          parentDiv.removeChild (removetg); 
                 selele=selele-1;     


        }else
           {
        parentDiv.removeChild (removetg);
                parentDiv.innerHTML=""; 
            selele=selele-1;        
           }
          removeBreak();    

    }

        function linebreak()
    {
        brindex=brindex+1;
         var brtag =document.createElement ("br");
         brtag.setAttribute("id",brindex);
                 var parentDiv = document.getElementById ("main");
                                 parentDiv.appendChild (brtag);

    }

        function linespace()
        {
         var myElement = document.createElement("span");
         myElement.innerHTML ="&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp";
        var parentDiv = document.getElementById ("main");
                 parentDiv.appendChild (myElement);
        }

    function removeBreak()
     {
             var myElement = document.getElementById(brindex);
             var parentDiv = document.getElementById ("main");
             brindex=brindex-1;
             parentDiv.removeChild (myElement);
     }


function xmlData()
{
xmlDoc=loadXMLDoc("data.xml");

newel=xmlDoc.createElement("edition");

x=xmlDoc.getElementsByTagName("span")[0];
x.appendChild(newel);



}



    </script>
  </head>
  <body>
    <div id="main1">
        <input type="button" onclick="addSelectBox ()" name="clickme" value="+"/>
<input type="button" onclick="removeSelect();" value="-"/>

<input type="button" onclick="xmlData();" value="XML" />

    </div>
    <div id="main">
    </div>

  </body>
</html>

如果有人帮助我做这件事会很棒。

Answer 1

选择JS Fiddle菜单中的选项，使其不会将所有代码包装在onload或onready函数中。

将函数声明包装在另一个函数中将导致它在本地作用域，因此您将无法通过onclick之类的内部事件属性将其作为全局访问。

更好的是，停止使用全局变量和内部事件处理程序属性，并使用JavaScript bind使用事件处理程序unobtrusively。

Answer 2

您应该在重复自己时查看代码

如果您使用plnkr

，则有效

http://plnkr.co/edit/q2T980oTi9wsQQZd5sJ2?p=preview

一个为jsfiddle提取js的实用程序

2 个答案: