為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