I am working on nested array. When i am trying to insert data to a div by using appendChild It is throwing an error saying Cannot read property 'appendChild' of null
My Code goes hear
<script>
var emp1 = [];
emp1["Emsno"] = 10001;
emp1["name"] = "jack";
emp1 ["sall"] = 5000;
var emp2 = [];
emp2["Emsno"] = 10002;
emp2["name"] = "Reck";
emp2 ["sall"] = 5500;
var emp3 = [];
emp3["Emsno"] = 10003;
emp3["name"] = "lama";
emp3 ["sall"] = 5300;
var emp4 = [];
emp4["Emsno"] = 10004;
emp4["name"] = "sam";
emp4 ["sall"] = 6000;
var emps = [emp1, emp2, emp3, emp4];
var Employedisplay = document.getElementById("Employedisplay");
function showEmployes(){
var n = emps.length;
for (i = 0; i < n ; i++){
var emp = emps[i];
for(var key in emp){
var NewDiv = document.createElement("div");
NewDiv.innerHTML = key + ": " + emp[key];
Employedisplay.appendChild(NewDiv);
}
var NewBrk = document.createElement("br")
Employedisplay.appendChild(NewBrk);
}
}
</script>
</head>
<body>
<input type = "button" id = "MyArray" value ="Show Emps" onclick="showEmployes()"/>
<hr>
<div id="Employedisplay"></div>
</body>
and it is working in this way
function showEmployes(){
var n = emps.length;
for (i = 0; i < n ; i++){
var emp = emps[i];
for(var key in emp){
var NewDiv = document.createElement("div");
NewDiv.innerHTML = key + ": " + emp[key];
document.getElementById("Employedisplay").appendChild(NewDiv);
}
var NewBrk = document.createElement("br")
Employedisplay.appendChild(NewBrk);
}
}
I am not understanding where i am going wrong in my first approach?
The below line of code is executed even before the browser add the #Employedisplay element in DOM.
var Employedisplay = document.getElementById("Employedisplay");
So when you click the button, Employedisplay variable is null
It's better to bootstrap your code on page load, or you can get the #Employedisplay element at the start of showEmployee method.
<script>
var emp1 = [];
emp1["Emsno"] = 10001;
emp1["name"] = "jack";
emp1["sall"] = 5000;
var emp2 = [];
emp2["Emsno"] = 10002;
emp2["name"] = "Reck";
emp2["sall"] = 5500;
var emp3 = [];
emp3["Emsno"] = 10003;
emp3["name"] = "lama";
emp3["sall"] = 5300;
var emp4 = [];
emp4["Emsno"] = 10004;
emp4["name"] = "sam";
emp4["sall"] = 6000;
var emps = [emp1, emp2, emp3, emp4];
function bootstrap() {
var Employedisplay = document.getElementById("Employedisplay");
}
function showEmployes() {
var n = emps.length;
for (i = 0; i < n; i++) {
var emp = emps[i];
for (var key in emp) {
var NewDiv = document.createElement("div");
NewDiv.innerHTML = key + ": " + emp[key];
Employedisplay.appendChild(NewDiv);
}
var NewBrk = document.createElement("br")
Employedisplay.appendChild(NewBrk);
}
}
</script>
</head>
<body onload="bootstrap();">
<input type="button" id="MyArray" value="Show Emps" onclick="showEmployes()" />
<hr>
<div id="Employedisplay"></div>
</body>
<script>
var emp1 = [];
emp1["Emsno"] = 10001;
emp1["name"] = "jack";
emp1 ["sall"] = 5000;
var emp2 = [];
emp2["Emsno"] = 10002;
emp2["name"] = "Reck";
emp2 ["sall"] = 5500;
var emp3 = [];
emp3["Emsno"] = 10003;
emp3["name"] = "lama";
emp3 ["sall"] = 5300;
var emp4 = [];
emp4["Emsno"] = 10004;
emp4["name"] = "sam";
emp4 ["sall"] = 6000;
var emps = [emp1, emp2, emp3, emp4];
function showEmployes(){
var Employedisplay = document.getElementById("Employedisplay");
var n = emps.length;
for (i = 0; i < n ; i++){
var emp = emps[i];
for(var key in emp){
var NewDiv = document.createElement("div");
NewDiv.innerHTML = key + ": " + emp[key];
Employedisplay.appendChild(NewDiv);
}
var NewBrk = document.createElement("br")
Employedisplay.appendChild(NewBrk);
}
}
</script>
</head>
<body>
<input type = "button" id = "MyArray" value ="Show Emps" onclick="showEmployes()"/>
<hr>
<div id="Employedisplay"></div>
</body>
Related
I have a code as follows:
function DetailFacture2() {
var ss = SpreadsheetApp.getActive();
var DetailDEVIS = SpreadsheetApp.setActiveSheet(ss.getSheetByName('DetailDEVIS'));
var FACTUREDevis = SpreadsheetApp.setActiveSheet(ss.getSheetByName('FACTUREDevis'));
var DetailFactureDevis = SpreadsheetApp.setActiveSheet(ss.getSheetByName('DetailFactureDevis'));
var lastrowpaste = FACTUREDevis.getLastRow();
var numrow = FACTUREDevis.getRange(lastrowpaste,13).getValue()
var lastrowpaste2 = DetailFactureDevis.getLastRow() - numrow +2;
var data = DetailDEVIS.getDataRange().getValues();
var DetailD = FACTUREDevis.getRange(lastrowpaste,2).getValue();
for(var i = 0; i<data.length;i++){
if(data[i][1] == DetailD){ //[1] because column B
var firstrowcopy = i+1;
Logger.log(firstrowcopy)
return (firstrowcopy)
}
}
};
It does return the correct value, but how do you use "firstrowcopy" as a fixed var?
I would like to use as follows:
function DetailFacture2() {
var ss = SpreadsheetApp.getActive();
var DetailDEVIS = SpreadsheetApp.setActiveSheet(ss.getSheetByName('DetailDEVIS'));
var FACTUREDevis = SpreadsheetApp.setActiveSheet(ss.getSheetByName('FACTUREDevis'));
var DetailFactureDevis = SpreadsheetApp.setActiveSheet(ss.getSheetByName('DetailFactureDevis'));
var lastrowpaste = FACTUREDevis.getLastRow();
var numrow = FACTUREDevis.getRange(lastrowpaste,13).getValue()
var lastrowpaste2 = DetailFactureDevis.getLastRow() - numrow +2;
var data = DetailDEVIS.getDataRange().getValues();
var DetailD = FACTUREDevis.getRange(lastrowpaste,2).getValue();
for(var i = 0; i<data.length;i++){
if(data[i][1] == DetailD){ //[1] because column B
var firstrowcopy = i+1;
var source = DetailDEVIS.getRange(firstrowcopy,1,numrow-1);
var destination = DetailFactureDevis.getRange(lastrowpaste2,3);
source.copyTo(destination);
}
}
};
But, as one would expect, it cannot work as it loops...
Not sure if I understand your question too. The code doesn't look well. Here is just my guess. Try to change the last lines this way:
// ...
var firstrowcopy = 0;
for (var i = 0; i < data.length; i++){
if(data[i][1] == DetailD){ //[1] because column B
firstrowcopy = i+1;
break;
}
}
var source = DetailDEVIS.getRange(firstrowcopy,1,numrow-1);
var destination = DetailFactureDevis.getRange(lastrowpaste2,3);
source.copyTo(destination);
}
I have this code. It checks if auctions[0] exists and if it does, it gets the value and sends it and continues to the next number. If not it will move on to the next number and do the same thing. And I need it to check if it exists until it reaches number 30
Are there any alternatives to this that is less bulky and messy?
if (ahValue.auctions[0]){
var itemName = ahValue.auctions[0].item_name
var itemLore = ahValue.auctions[0].item_lore
var itemTier = ahValue.auctions[0].tier
var itemSeller = ahValue.auctions[0].auctioneer
var itemBids = ahValue.auctions[0].bids.length
console.log(`${itemName}${itemLore}${itemTier}${itemSeller}${itemBids}`)
}
if (ahValue.auctions[1]){
var itemName = ahValue.auctions[1].item_name
var itemLore = ahValue.auctions[1].item_lore
var itemTier = ahValue.auctions[1].tier
var itemSeller = ahValue.auctions[1].auctioneer
var itemBids = ahValue.auctions[1].bids.length
console.log(`${itemName}${itemLore}${itemTier}${itemSeller}${itemBids}`)
}
//copy and paste until it reaches 30
if (ahValue.auctions[30]){
var itemName = ahValue.auctions[30].item_name
var itemLore = ahValue.auctions[30].item_lore
var itemTier = ahValue.auctions[30].tier
var itemSeller = ahValue.auctions[30].auctioneer
var itemBids = ahValue.auctions[30].bids.length
console.log(`${itemName}${itemLore}${itemTier}${itemSeller}${itemBids}`)
}
Use a for loop:
for(let i = 0; i <= 30; i++) {
if (ahValue.auctions[i]){
var itemName = ahValue.auctions[i].item_name
var itemLore = ahValue.auctions[i].item_lore
var itemTier = ahValue.auctions[i].tier
var itemSeller = ahValue.auctions[i].auctioneer
var itemBids = ahValue.auctions[i].bids.length
console.log(`${itemName}${itemLore}${itemTier}${itemSeller}${itemBids}`)
}
}
try something like this.
auctions.length this will return the lenght of array, and this will help you to iterate over all the elements.
This is the running code snippet.
var auctions = [];
auctions[0] = { "item_name" : "item_name1", "item_lore" : "item_lore1", "tier" : "tier1", "auctioneer" : "auctioneer1" , "bids":"bids1"};
auctions[1] = { "item_name" : "item_name2", "item_lore" : "item_lore2", "tier" : "tier2", "auctioneer" : "auctioneer2" , "bids":"bids2"};
for(var i = 0; i < auctions.length; i++){
if(auctions[i]){
console.log(auctions[i].item_name);
}
}
And your full code will look like this:
for(let i = 0; i <= ahValue.auctions.length; i++) {
if (ahValue.auctions[i]){
var itemName = ahValue.auctions[i].item_name
var itemLore = ahValue.auctions[i].item_lore
var itemTier = ahValue.auctions[i].tier
var itemSeller = ahValue.auctions[i].auctioneer
var itemBids = ahValue.auctions[i].bids.length
console.log(`${itemName}${itemLore}${itemTier}${itemSeller}${itemBids}`)
}
}
I am trying to simplify code where I define a lot of variables which have a similar structure. i.e:
To be simplified:
var monthActual = document.createElement('input');
monthActual.name = "monthActual_" + showrooms[i];
monthActual.value = monthActualData;
fullForm.appendChild(monthActual);
var monthTarget = document.createElement('input');
monthTarget.name = "monthTarget_" + showrooms[i];
monthTarget.value = monthTargetData;
fullForm.appendChild(monthTarget);
var priorYear = document.createElement('input');
priorYear.name = "priorYear_" + showrooms[i];
priorYear.value = priorYearData;
fullForm.appendChild(priorYear);
var priorYearToDate = document.createElement('input');
priorYearToDate.name = "priorYearToDate_" + showrooms[i];
priorYearToDate.value = priorYearToDateData;
fullForm.appendChild(priorYearToDate);
var yearToDateTarget = document.createElement('input');
yearToDateTarget.name = "yearToDateTarget_" + showrooms[i];
yearToDateTarget.value = yearToDateTargetData;
fullForm.appendChild(yearToDateTarget);
var yearToDateActual = document.createElement('input');
yearToDateActual.name = "yearToDateActual_" + showrooms[i];
yearToDateActual.value = yearToDateActualData;
fullForm.appendChild(yearToDateActual);
var YTDVsPYTDSalesCurrency = document.createElement('input');
YTDVsPYTDSalesCurrency.name = "YTDVsPYTDSalesCurrency_" + showrooms[i];
YTDVsPYTDSalesCurrency.value = YTDVsPYTDSalesCurrencyData;
fullForm.appendChild(YTDVsPYTDSalesCurrency);
var YTDVsPYTDSalesinPercent = document.createElement('input');
YTDVsPYTDSalesinPercent.name = "YTDVsPYTDSalesinPercent_" + showrooms[i];
YTDVsPYTDSalesinPercent.value = YTDVsPYTDSalesinPercentData;
fullForm.appendChild(YTDVsPYTDSalesinPercent);
var YTDVsYTDTargetinSalesCurrency = document.createElement('input');
YTDVsYTDTargetinSalesCurrency.name = "YTDVsYTDTargetinSalesCurrency_" + showrooms[i];
YTDVsYTDTargetinSalesCurrency.value = YTDVsYTDTargetinSalesCurrencyData;
fullForm.appendChild(YTDVsYTDTargetinSalesCurrency);
var YTDVsYTDTargetinPercent = document.createElement('input');
YTDVsYTDTargetinPercent.name = "YTDVsYTDTargetinPercent_" + showrooms[i];
YTDVsYTDTargetinPercent.value = YTDVsYTDTargetinPercentData;
fullForm.appendChild(YTDVsYTDTargetinPercent);
I've tried to simplify it by putting the variables into an array then iterating through them like so:
Attempted simplify:
var tableColumnData = ['monthActual', 'monthTarget', 'priorYear', 'priorYearToDate', 'yearToDateTarget',
'yearToDateActual', 'YTDVsPYTDSalesCurrency', 'YTDVsPYTDSalesinPercent', 'YTDVsYTDTargetinSalesCurrency', 'YTDVsYTDTargetinPercent'];
for(var j=0; j<tableColumnData.length; j++){
var temp = document.createElement('input');
temp.name = tableColumnData[j]+ "_" + showrooms[i];
temp.value = (tableColumnData[j] +"Data");
fullForm.appendChild(temp);
}
This is however only giving me the string value of the literal string: tableColumnData[j] +"Data" when I am trying to point towards the variable of the same name. I am not sure how to use the variable of the same name.
Full code:
var fullForm = document.createElement('form');
fullForm.action = '/fpdf/requests/print_fullreport.php?year=' + requestYear + '&month=' + getMonth(requestMonth);
fullForm.id = 'fullForm';
fullForm.target = '_blank';
fullForm.method = 'post';
var showrooms = [1, 3, 4, 24, 27, 29, 34, 36, 37, 8, 21, 25, 26, 28, 31, 33, -1];
for (var i = 0; i <showrooms.length; i++){
var showroomData = allTargetsData.monthlyDetail[showrooms[i]];
var currencyData = showroomData.currency;
var showroomname = showroomData.showroom_name;
var monthActualData = showroomData.total;
var monthTargetData = Math.round(allTargetsData.originalTarget[requestYear][showrooms[i]][requestMonth]['amount']);
var priorYearData = allTargetsData.realFigure[requestYear - 1][showrooms[i]]['figures'][requestMonth];
var priorYearToDateData = showroomData.ly_ytd;
var yearToDateTargetData = Math.round(showroomData.ytd_target);
var yearToDateActualData = showroomData.ytd;
var calculation1 = (showroomData.ytd - showroomData.ly_ytd).toFixed(2);
var YTDVsPYTDSalesCurrencyData = calculation1;
var calculation2 = (parseFloat(showroomData.ytd - showroomData.ly_ytd)/showroomData.ly_ytd).toFixed(2);
var YTDVsPYTDSalesinPercentData = (calculation2*100);
if (isNaN(YTDVsPYTDSalesinPercentData) || YTDVsPYTDSalesinPercentData == "Infinity"){
YTDVsPYTDSalesinPercentData = 0;
}
var calculation3 = (showroomData.ytd - showroomData.ytd_target).toFixed(2);
var YTDVsYTDTargetinSalesCurrencyData = (calculation3*100)/100;
var calculation4 = (parseFloat(showroomData.ytd - showroomData.ytd_target)/parseFloat(showroomData.ytd_target)).toFixed(2);
var YTDVsYTDTargetinPercentData = calculation4*100;
if (isNaN(YTDVsYTDTargetinPercentData) || YTDVsYTDTargetinPercentData == "Infinity"){
YTDVsYTDTargetinPercentData = 0;
}
var showroomCurrency = document.createElement('input');
showroomCurrency.name = "showroomCurrency_" + showrooms[i];
showroomCurrency.value = currencyData;
fullForm.appendChild(showroomCurrency);
var showroomNameField = document.createElement('input');
showroomNameField.name = "showroomname_" + showrooms[i];
showroomNameField.value = showroomname;
fullForm.appendChild(showroomNameField);
var tableColumnData = ['monthActual', 'monthTarget', 'priorYear', 'priorYearToDate', 'yearToDateTarget',
'yearToDateActual', 'YTDVsPYTDSalesCurrency', 'YTDVsPYTDSalesinPercent', 'YTDVsYTDTargetinSalesCurrency', 'YTDVsYTDTargetinPercent'];
for(var j=0; j<tableColumnData.length; j++){
var temp = document.createElement('input');
temp.name = tableColumnData[j]+ "_" + showrooms[i];
temp.value = (tableColumnData[j] +"Data");
fullForm.appendChild(temp);
}
}
You were really close, but just needed to take the next step. You need to store your variables in an array or an object so that you can dynamically reference them, rather than through literals.
In this example, I took your code and put all of the extra data into the otherData object. That allows you to give them human readable names, but also be able to use the square bracket notation to look up the property. i.e. otherData.monthActualData == otherData["monthActualData"].
No promises on whether or not I did this perfectly, but the concept is still there.
var fullForm = document.createElement('form');
fullForm.action = '/fpdf/requests/print_fullreport.php?year=' + requestYear + '&month=' + getMonth(requestMonth);
fullForm.id = 'fullForm';
fullForm.target = '_blank';
fullForm.method = 'post';
var showrooms = [1, 3, 4, 24, 27, 29, 34, 36, 37, 8, 21, 25, 26, 28, 31, 33, -1];
for (var i = 0; i <showrooms.length; i++){
var showroomData = allTargetsData.monthlyDetail[showrooms[i]];
var currencyData = showroomData.currency;
var showroomname = showroomData.showroom_name;
var otherData = {};
otherData.monthActualData = showroomData.total;
otherData.monthTargetData = Math.round(allTargetsData.originalTarget[requestYear][showrooms[i]][requestMonth]['amount']);
otherData.priorYearData = allTargetsData.realFigure[requestYear - 1][showrooms[i]]['figures'][requestMonth];
otherData.priorYearToDateData = showroomData.ly_ytd;
otherData.yearToDateTargetData = Math.round(showroomData.ytd_target);
otherData.yearToDateActualData = showroomData.ytd;
var calculation1 = (showroomData.ytd - showroomData.ly_ytd).toFixed(2);
otherData.YTDVsPYTDSalesCurrencyData = calculation1;
var calculation2 = (parseFloat(showroomData.ytd - showroomData.ly_ytd)/showroomData.ly_ytd).toFixed(2);
otherData.YTDVsPYTDSalesinPercentData = (calculation2*100);
if (isNaN(otherData.YTDVsPYTDSalesinPercentData) || otherData.YTDVsPYTDSalesinPercentData == "Infinity"){
otherData.YTDVsPYTDSalesinPercentData = 0;
}
var calculation3 = (showroomData.ytd - showroomData.ytd_target).toFixed(2);
otherData.YTDVsYTDTargetinSalesCurrencyData = (calculation3*100)/100;
var calculation4 = (parseFloat(showroomData.ytd - showroomData.ytd_target)/parseFloat(showroomData.ytd_target)).toFixed(2);
otherData.YTDVsYTDTargetinPercentData = calculation4*100;
if (isNaN(otherData.YTDVsYTDTargetinPercentData) || otherData.YTDVsYTDTargetinPercentData == "Infinity"){
otherData.YTDVsYTDTargetinPercentData = 0;
}
var showroomCurrency = document.createElement('input');
showroomCurrency.name = "showroomCurrency_" + showrooms[i];
showroomCurrency.value = currencyData;
fullForm.appendChild(showroomCurrency);
var showroomNameField = document.createElement('input');
showroomNameField.name = "showroomname_" + showrooms[i];
showroomNameField.value = showroomname;
fullForm.appendChild(showroomNameField);
var tableColumnData = ['monthActual', 'monthTarget', 'priorYear', 'priorYearToDate', 'yearToDateTarget',
'yearToDateActual', 'YTDVsPYTDSalesCurrency', 'YTDVsPYTDSalesinPercent', 'YTDVsYTDTargetinSalesCurrency', 'YTDVsYTDTargetinPercent'];
for(var j=0; j<tableColumnData.length; j++){
var temp = document.createElement('input');
temp.name = tableColumnData[j]+ "_" + showrooms[i];
temp.value = otherData[tableColumnData[j] +"Data"];
fullForm.appendChild(temp);
}
}
I have made a dynamically generated a form which creates some selects and input boxes.
I need to do a form submit and need all the data from the selects and inputs into individual variables.
The code goes like this:
HTML CODE :
<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>
<form id="autoPopulation_form">
<div id="main"></div>
</form>
JS CODE:
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 textbox = document.createElement('input');
textbox.setAttribute("name", "text" + selele);
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");
for (var i = 0; i < arr.length; i++) {
var option = new Option(arr[i]);
selectElement.options[selectElement.options.length] = option;
selectElement.setAttribute("name", "tag" + selele);
}
for (var i = 0; i < arr2.length; i++) {
var option = new Option(arr2[i]);
selectElement1.options[selectElement1.options.length] = option;
selectElement1.setAttribute("name", "acctType" + selele);
}
for (var i = 0; i < arr3.length; i++) {
var option = new Option(arr3[i]);
selectElement2.options[selectElement2.options.length] = option;
selectElement2.setAttribute("name", "compare" + selele);
}
for (var i = 0; i < arr4.length; i++) {
var option = new Option(arr4[i]);
selectElement3.options[selectElement3.options.length] = option;
selectElement3.setAttribute("name", "match_name" + selele);
}
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);
};
JSFIDDLE FOR THE SAME :
What I basically want to do is I need all the textboxes with name "text1","text2","text3 in different var's (variables).
I have heard about the jQuery .serialize, but would it help my cause and it would be good if anybody can show me the same in my Fiddle.
use FormData() method to serialize your form:
document.getElementByid('autoPopulation_form').onSubmit = function(){
var frmData = new FormData(this);
console.log(frmData);
};
output of it (tested with clicked + one time):
?tag1=Stocks&acctType1=individual&compare1=contains
&match_name1=scrapedaccounttype
&text1=gsdfgsdgfsgsdfgsdf"
Note: You have to have a submit button to submit the form.
Fiddle
Fiddle with method post
I have made a simple dynamic form to generate input boxes.
<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>
Here's the javascript code:
(function () {
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);
};
});
I can't get it to work on jsFiddle, the buttons don't work.
They work fine if I embed it in a tag.
Can anybody help me fix them.
EDIT: I guess i added anonymously because I wanted the var selele and brindex globally for all these functions.
I have made the code changes.
JSFIDDLE
Your functions are within an anonymous function and thus not available from outside.
First remove the code from the anonymous function (see here: http://jsfiddle.net/uH84W/6/), then fix the console errors you get (I assume that's not the whole code).
function addSelectBox() {...
In your fiddle you select onload but you change onload to no warp-in or no warp-in now it's work fine