a utility to extract js for jsfiddle
Question
I have this page .
If I save it as html and all the js code in the tags
but when I put the code in the script tags in the js part of jsfiddle.com, it won't load.
code :
<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 ="           ";
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>
It would be great if somebody would help me in running this.
2 answers
solution1
0 2014-03-06 09:41:55
Pick the option in the JS Fiddle menu so it doesn't wrap all your code in an onload or onready function.
Wrapping a function declaration in another function will cause it to be locally scoped, so you won't be able to access it as a global through an intrinsic event attribute like onclick .
Better yet, stop using globals and intrinsic event handler attributes and bind your event handlers unobtrusively with JavaScript.
solution2
0 2014-03-06 09:44:32
You should review your code though you are repeating yourself
Works if you use plnkr
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.