为jsfiddle提取js的实用程序

Question

我有这个页面。

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

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

代码：

<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 毫不费力地绑定事件处理程序。

Answer 2

尽管您要重复自己的操作，但您应该查看代码

如果您使用plnkr，则可以使用

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

为jsfiddle提取js的实用程序

问题描述

2 个解决方案

解决方案1
0 2014-03-06 09:41:55

解决方案2
0 2014-03-06 09:44:32

为jsfiddle提取js的实用程序

问题描述

2 个解决方案

解决方案1 0 2014-03-06 09:41:55

解决方案2 0 2014-03-06 09:44:32

解决方案1
0 2014-03-06 09:41:55

解决方案2
0 2014-03-06 09:44:32