I am extremely new to JavaScript. I am trying to control the options inside one listbox (called Aggregator) using the selected value of another (called Product). Below is the code I have written so far.
Now when I load the HTML page the code I have written to control the text boxes (using txt, txt2, txt3) does not work either now.
Javascript
function pGo() {
var x = document.getElementById("Product").value;
var txt = "";
var txt2 = "";
var txt3 = "";
var list = document.getElementById("Aggregator");
var aggrs = new Array();
aggrs[0] = "h";
aggrs[1] = "e";
aggrs[2] = "l";
aggrs[3] = "l";
aggrs[4] = "l";
aggrs[5] = "o";
aggrs[6] = "o";
var length = aggrs.length;
var element = null;
if (x == "HII") {
txt = "Full ";
txt2 = "/";
txt3 = "/";
for (var i = 0; i < 5; i++)){
element = aggrs[i]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
}
else if (x == "DLG"){
txt = "Full";
txt2 = "/T";
txt3 = "/responses/";
for (var i = 0; i < 1; i++)){
element = aggrs[i]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
}
else if (x == "TBB"){
txt = "Full ";
txt2 = "/Trams";
txt3 = "/respo";
for (var i = 0; i < 1; i++)){
element = aggrs[i]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
element = aggrs[6]
var opt = document.createElement("option");
opt.innerText = element;
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
form.elements.calcType.value = txt;
form.elements.transform.value = txt2;
form.elements.calcResponse.value = txt3;
}
HTML
product
<select id="Product" onchange = "pGo()">
<option>HII</option>
<option>DLG</option>
<option>TBB</option>
</select><div>
<script type = "text/javascript">
aggregator
<select name = "Aggregator">
</select><br/><br/>
Other text boxes emitted
I need the Aggregator to display certain values from the aggrs list depending on the value selected in the Product select:
HII : [0,1,2,3,4,5]
DLG : [0,1]
TBB : [0,1,6]
Don't go learning jQuery if you're having trouble with basic JavaScript. You'll have worse problems with jQuery.
For a start, you're asking for the ID "Aggregator":
var list = document.getElementById("Aggregator");
when you don't have an object with the ID "Aggregator":
<select name = "Aggregator"></select>
First off, there are a LOT of syntax errors in your code. I have added comments where I made those changes.
There was no id element "Aggregator" so I changed your markup:
product
<select id="Product" onchange="pGo();">
<option>Pick one</option>
<option>HII</option>
<option>DLG</option>
<option>TBB</option>
</select>
<div>aggregator
<select id="Aggregator" name="Aggregator"></select>
<br/>
<br/>
</div>
You had a lot of duplicate code (still is some) and other issues (see comments)
// function to remove duplicate code
function addOptions(list, aggrs, limit) {
var i = 0;
// fix issue where option list did not empty on new select
for (; i < list.length; i++) {
list.remove(i);
}
for (i = 0; i < limit; i++) { // fix extra ")"
var opt = document.createElement("option");
element = aggrs[i]; //missing semicolon
opt.text = element; // use standard form not innerHtml
opt.value = element; // you had no value
opt.setAttribute(element, 'newvalue');
list.appendChild(opt);
}
}
function pGo() {
var x = document.getElementById("Product").value;
var txt = "";
var txt2 = "";
var txt3 = "";
var list = document.getElementById("Aggregator");
var aggrs = ["h", "e", "l", "l", "l", "o", "o"]; //simpler array
var length = aggrs.length;
var element = null;
if (x == "HII") {
txt = "Full ";
txt2 = "/";
txt3 = "/";
addOptions(list, aggrs, 5);
} else if (x == "DLG") {
txt = "Full";
txt2 = "/T";
txt3 = "/responses/";
addOptions(list, aggrs, 1);
} else if (x == "TBB") {
txt = "Full ";
txt2 = "/Trams";
txt3 = "/respo";
addOptions(list, aggrs, 1);
// strange additional option added
var oneAggr = [];
oneAggr[0] = aggrs[6];
addOptions(list, oneAggr, 1);
}
// form.elements.calcType.value = txt; // commented out due to not existing
// form.elements.transform.value = txt2;
// form.elements.calcResponse.value = txt3;
}
This is NOT really pretty (OK it is somewhat strange the options you set) even yet but at least it should work.
Sample to work with: http://jsfiddle.net/Qc4yD/
Related
So I am trying to create an expense tracker that has a list of dynamically created options.
The user will be able to:
add a new expense
select a category
add a name for the expense, and then
put how much the expense is.
I have everything working, except for I would like to display the categories with the total amount of money budgeted for each category.
Right now I have 9 categories. If a uses has 2 expenses with the same category, for example "Health & Fitness", I would like that Category to show up on the left side in a DIV that displays the total amount budgeted. If there are other categories like "Auto & Transport", I would like that to display as well with the total amount budgeted. I can't seem to figure out how to separate the totals based on the category selected.
var addListItem = document.getElementById("add-more");
addListItem.addEventListener("click", function() {
createNewItem();
});
//Display Month and Day
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
today = mm + "/" + dd;
document.getElementById("current-date").innerHTML = today;
//Creates new elements
function createNewItem() {
var u = document.getElementById("full-item-list");
var l = document.createElement("li");
var elinput = document.createElement('input');
var select = document.createElement('select');
var option1 = document.createElement('option');
var option2 = document.createElement('option');
var option3 = document.createElement('option');
var option4 = document.createElement('option');
var option5 = document.createElement('option');
var option6 = document.createElement('option');
var option7 = document.createElement('option');
var option8 = document.createElement('option');
var option9 = document.createElement('option');
var option10 = document.createElement('option');
var o1 = document.createTextNode('Category');
var o2 = document.createTextNode('Auto & Transport');
var o3 = document.createTextNode('Bills & Utilities');
var o4 = document.createTextNode('Health & Fitness');
var o5 = document.createTextNode('Home');
var o6 = document.createTextNode('Personal Care');
var o7 = document.createTextNode('Pets');
var o8 = document.createTextNode('Shopping');
var o9 = document.createTextNode('Entertainment');
var o10 = document.createTextNode('Investments');
var expenseName = document.createElement('input');
var icon = document.createElement('img');
option1.setAttribute('disabled', 'true');
option1.setAttribute('selected', 'true');
option1.appendChild(o1);
option2.appendChild(o2);
option2.setAttribute('name', 'testName');
option3.appendChild(o3);
option3.setAttribute('name', 'testName2');
option4.appendChild(o4);
option5.appendChild(o5);
option6.appendChild(o6);
option7.appendChild(o7);
option8.appendChild(o8);
option9.appendChild(o9);
option10.appendChild(o10);
select.setAttribute('type', 'select');
select.setAttribute('placeholder', 'Select a Category');
select.appendChild(option1);
select.appendChild(option2);
select.appendChild(option3);
select.appendChild(option4);
select.appendChild(option5);
select.appendChild(option6);
select.appendChild(option7);
select.appendChild(option8);
select.appendChild(option9);
select.appendChild(option10);
expenseName.setAttribute('type', 'text');
expenseName.setAttribute('placeholder', 'Expense name');
expenseName.setAttribute('class', 'expense-input-name')
expenseName.setAttribute('name', 'totalExpense');
elinput.setAttribute('type', 'number');
elinput.setAttribute('class', 'li-input');
elinput.setAttribute('placeholder', 'Enter amount');
elinput.setAttribute('name', 'qty');
l.setAttribute('class', 'list-item');
l.setAttribute('name', 'li-name');
icon.setAttribute('class', 'remove-icon');
icon.setAttribute('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/375261/System_Delete.ico');
icon.setAttribute("id", "icon-id");
icon.addEventListener('click', function(e) {
thaticon(e);
}, false);
l.appendChild(select);
l.appendChild(expenseName);
l.appendChild(elinput);
l.appendChild(icon);
u.appendChild(l);
}
//Deletes elements
function thaticon(e) {
console.log("test");
var el = e.target;
var elListItem= el.parentNode;
elFullList = elListItem.parentNode;
elFullList.removeChild(elListItem);
}
//Calculates and displays results
function displayResult() {
var arr = document.getElementsByName("qty");
var wage = document.getElementById("inputWage").value;
var jumboDiv = document.getElementById("jumbo-results").style.display="block";
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseFloat(arr[i].value)) tot += parseFloat(arr[i].value);
}
document.getElementById("result").innerHTML = "Total Expenses: $" + tot.toFixed(2);
document.getElementById("left").innerHTML = "Left Over: $" + ((wage - tot).toFixed(2));
}
//Resets and clears entire entry
function resetForm() {
var jumboDiv = document.getElementById("jumbo-results").style.display="none";
document.getElementById("full-item-list").innerHTML = "";
document.getElementById("inputWage").value = "";
document.getElementById("result").innerHTML = "";
document.getElementById("left").innerHTML = "";
document.getElementById("number-display").innerHTML = "";
}
//Displays the selected categories by user with the total sum for each one
function displayCategory() {
}
//Capture screen shots
/*function captureScreen() {
html2canvas(document.querySelector("#capture")).then(canvas => {
document.body.appendChild(canvas)
});
}*/
You will need to create a data structure to store the category information and use that to construct your HTML elements.
The following code constructs a simple select element without any additional attributes.
var optionsArray = ['Category',
'Auto & Transport',
'Bills & Utilities',
'Health & Fitness',
'Home',
'Personal Care',
'Pets',
'Shopping',
'Entertainment',
'Investments'];
var selectElem = document.createElement('select');
selectElem.setAttribute('placeholder', 'Select a Category');
// iterate through the array of options
optionsArray.forEach(function(text){
var option = document.createElement('option');
var optionText = document.createTextNode(text);
option.appendChild(optionText);
selectElem.appendChild(option);
});
// selectElem is ready to append to the DOM
This can be improved upon by changing the elements in the array to objects and using the attributes if required.
e.g.
var optionsArray = ['Category',
'Auto & Transport',
{
'itemText' : 'Bills & Utilities',
'itemDisabled' : true,
'itemSelected' : true
},
'Health & Fitness',
'Home',
'Personal Care',
'Pets',
'Shopping',
'Entertainment',
'Investments'];
var selectElem = document.createElement('select');
selectElem.setAttribute('placeholder', 'Select a Category');
// iterate through the array of options
optionsArray.forEach(function(item){
var text = (typeof(item) === 'string') ? item : item.itemText;
var option = document.createElement('option');
var optionText = document.createTextNode(text);
option.appendChild(optionText);
if (typeof(item) === 'object') {
// handle custom attributes
Object.keys(item).forEach(function(key){
switch(key) {
case 'itemDisabled' :
if (item[key]) {
option.setAttribute('disabled', true);
}
break;
case 'itemSelected' :
if (item[key]) {
option.setAttribute('selected', true);
}
break;
default:
break;
}
});
}
selectElem.appendChild(option);
});
// selectElem is ready to append to the DOM
The calculations for the category totals would need to be done using a data structure such as an array of objects. Iterate through the array, calculating the totals before adding the desired information to the HTML.
I am trying to make an array of listing using checkbox function, the function checks if the all checkbox is clicked then put all listings in the array, if it is clicked to uncheck it pulls all array values, and if a single listing is checked it adds to the array , and if its unchecked when its single or all listing values its value from the array is taken out. Yet on the first run if all selected i cant remove a single value by selecting one checkbox, and after all are checked and unchecked i cant add a single value into array by checking a single option.
var lstsToEdit = [];
lstDisplay("act");
$(".tab-listings-selection").on("click", function() {
var lstType;
if(this.id == "mnLstAct") lstType = "act";
if(this.id == "mnLstInact") lstType = "inact";
if(this.id == "mnLstDraft") lstType = "draft";
document.getElementById("mnLstAct").style.fontWeight = "normal";
document.getElementById("mnLstInact").style.fontWeight = "normal";
document.getElementById("mnLstDraft").style.fontWeight = "normal";
this.style.fontWeight = "bold";
lstDisplay(lstType);
});
function lstDisplay(type){
document.getElementById("main").innerHTML = "";
var tblLsts = document.createElement("table");
tblLsts.setAttribute("id", "tblLsts");
$("#main").append(tblLsts);
var tblLstsHRow = tblLsts.insertRow(0);
var tblLstsHThumb = tblLstsHRow.insertCell(0);
var tblLstsHTitle = tblLstsHRow.insertCell(1);
var tblLstsHStock = tblLstsHRow.insertCell(2);
var tblLstsHPrice = tblLstsHRow.insertCell(3);
var tblLstsHExpiry = tblLstsHRow.insertCell(4);
var tblLstsHSection = tblLstsHRow.insertCell(5);
var tblLstsHAll = tblLstsHRow.insertCell(6);
tblLstsHThumb.outerHTML = "<th></th>";
tblLstsHTitle.outerHTML = "<th>Title</th>";
tblLstsHStock.outerHTML = "<th>In Stock</th>";
tblLstsHPrice.outerHTML = "<th>Price</th>";
tblLstsHExpiry.outerHTML = "<th>Expiry</th>";
tblLstsHSection.outerHTML = "<th>Section</th>";
tblLstsHAll.outerHTML = "<th>All<input id=\"lstsAllChk\" class=\"lstChk\" type=\"checkbox\"/></th>";
var lstThumb = [];
var listings;
if (type == "act") lsts = lstAct;
if (type == "inact") lsts = lstInact;
if (type == "draft") lsts = lstDraft;
for (var lstIndex = 1; lstIndex < lsts.results.length+1; lstIndex++){
var lst = lsts.results[lstIndex-1];
var row = document.getElementById("tblLsts").insertRow(lstIndex);
var colThumb = row.insertCell(0);
var colTitle = row.insertCell(1);
var colStock = row.insertCell(2);
var colPrice = row.insertCell(3);
var colExpiry = row.insertCell(4);
var colSection = row.insertCell(5);
var colSelect = row.insertCell(6);
var lstJ = JSON.parse($.ajax({url: "listings/" + lst.listing_id + ".json", async: false}).responseText);
colThumb.innerHTML = "<img src=\"" + lstJ.results[0].url_75x75 +"\">";
colTitle.innerHTML = lst.title;
colStock.innerHTML = lst.quantity;
colPrice.innerHTML = lst.price;
colSelect.innerHTML = "<input id=\"" + lst.listing_id + "\" class=\"lstChk\" type=\"checkbox\"/>";
for (var secIndex = 0; secIndex < sects.results.length; secIndex++){
if (sects.results[secIndex].shop_section_id == lst.shop_section_id)
colSection.innerHTML = sects.results[secIndex].title;
}
}
$.getScript("tableSort.js");
}
$(".lstChk").on("click", function() {
if(this.id == "lstsAllChk" && this.checked){
for(var lstIndex = 0; lstIndex < document.querySelectorAll(".lstChk").length; lstIndex++){
var lstId = document.querySelectorAll(".lstChk")[lstIndex].id;
//if(lstsToEdit.findIndex( function(value){ value == lstId;}) == -1){;
$("#"+lstId).prop("checked");
lstsToEdit.push(lstId);
//}
}
}
else if(this.id == "lstsAllChk" && !this.checked){
for(var lstIndex = 0; lstIndex < document.querySelectorAll(".lstChk").length; lstIndex++){
var lstId = document.querySelectorAll(".lstChk")[lstIndex].id;
$("#"+lstId).prop("checked", false);
var index = lstsToEdit.findIndex( function(value){ value == lstId;});
lstsToEdit.splice(index, 1);
}
}
else if(this.checked) lstsToEdit.push(this.id);
else {
var index = lstsToEdit.findIndex( function(value){ value == this.id;});
lstsToEdit.splice(index, 1);
}
if(lstsToEdit.length > 0) document.getElementById("lstEdit").style.display = "block";
else document.getElementById("lstEdit").style.display = "none";
console.log(lstsToEdit);
});
table sort js
$("th").on("click", function() {
var table = this.closest("table");
var selection = $(this).text();
var col = this.cellIndex;
var tbl = [];
var order = [];
for (var rowIndex = 0; rowIndex < table.rows.length; rowIndex++){
if (rowIndex > 0){
tbl.push([]);
for (var colIndex = 0; colIndex < table.rows[rowIndex].cells.length; colIndex++){
tbl[rowIndex-1].push(table.rows[rowIndex].cells[colIndex].innerHTML);
if (colIndex == col){
order.push([]);
order[rowIndex-1].push(tbl[rowIndex-1][colIndex]);
order[rowIndex-1].push(rowIndex-1);
}
}
}
}
for (var rowIndex = table.rows.length-1; rowIndex > 0; rowIndex--){
table.deleteRow(rowIndex);
}
var reA = /[^a-zA-Z]/g;
var reN = /[^0-9]/g
order.sort (function (a,b){
var aA = a[0].replace(reA, "").toLowerCase();
var bA = b[0].replace(reA, "").toLowerCase();
if(aA == bA) {
var aN = parseInt(a[0].replace(reN, ""), 10);
var bN = parseInt(b[0].replace(reN, ""), 10);
return aN == bN ? 0 : aN > bN ? 1 : -1;
} else {
return aA > bA ? 1 : -1;
};
});
for (var orderIndex = 0; orderIndex < order.length; orderIndex++){
var row = table.insertRow(orderIndex + 1);
for (var colIndex = 0; colIndex < tbl[orderIndex].length; colIndex++){
var cell = row.insertCell(colIndex);
var index = order[orderIndex][1];
cell.innerHTML = tbl[index][colIndex];
}
}
});
index
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<?php
include 'menu.php';
include 'shopJson.php';
?>
<div id="lstEdit">edit</div>
<div id="main"></div>
</body>
</html>
<script>
var lstActURL = "listings/active.json";
var lstInactURL = "listings/inactive.json";
var lstDraftURL = "listings/draft.json";
var sectURL = "listings/sect.json";
var lstAct = JSON.parse($.ajax({url: lstActURL, async: false}).responseText);
var lstInact = JSON.parse($.ajax({url: lstInactURL, async: false}).responseText);
var lstDraft = JSON.parse($.ajax({url: lstInactURL, async: false}).responseText);
var sects = JSON.parse($.ajax({url: sectURL, async: false}).responseText);
$("#mnLstAct").append("(" + lstAct.results.length + ")");
$("#mnLstInact").append("(" + lstInact.results.length + ")");
$("#mnLstDraft").append("(" + lstDraft.results.length + ")");
document.getElementById("mnLstAct").style.fontWeight = "bold";
$.getScript("listings.js");
</script>
The JQuery .attr() method correlates to the actual attributes of a DOM element. However, from the JavaScript perspective, many elements have DOM properties that seem like they are the same as their HTML attribute counterparts, but are not because the property is updated in memory, while the attribute change updates the DOM. Sometimes, there are properties that don't even have an attribute counterpart (i.e. selectedIndex on select elements).
The point is that you have thess lines:
$("#"+lstId).attr("checked", true);
$("#"+lstId).attr("checked", false);
Where you are attempting to force an element to be checked, but that may not correlate to what you get when you check the checked property.
To account for this, use the prop() method instead of the .attr() method:
$("#"+lstId).prop("checked", true);
$("#"+lstId).prop("checked", false);
See the documentation for .prop() for details and a comparison between attributes and properties.
I am creating a dynamic table and getting td values from array, my goal was when I click on any cell that convert to input box and get this td value as input value so we can change and when I click on another td the previous td turn back to it's original position with new or same old value.
Now this is almost happening, problem is when I click on td it turn to input box and when I click again on the same input box it prints it's html code inside the text box as it's value and then the all td's go crazy, like this: <input id='thisInputId' type='text' value='"+thisInHtml+"' style='width: 100px;'> it creates two input boxes in same time and sometime prints the html code inside td without creating input box. I am new to these things trying to learn and stuck on this for two days.
var getInput = ""; var inputsParent = ""; var inputs = ""; var thisInHtml = ""; var getInputVal = "";
var thisTdInnerHtml = ""; var input = ""; var flag = 1;
var getInputLength = getInput.length+1;
for(var j=0; j<allTds.length;j++){
allTds[j].onclick = function(){
thisInHtml = this.innerHTML;
var thisId = this.id;
if(inputs.length != 0){
inputsParent.removeChild(inputs);
inputsParent.innerHTML = getInputVal;
flag = 1;
}
this.innerHTML = thisInHtml;
if(getInputVal != ""){
input = this.innerHTML = "<input id='thisInputId' type='text' value='"+thisInHtml+"' style='width: 100px;'>";
getInput = document.getElementsByTagName("input");
getInputVal = document.getElementById("thisInputId").value;
}
if(getInputLength > 0){
for(var k =0; k<getInputLength;k++){
inputsParent = getInput[k].parentNode;
inputs = inputsParent.childNodes[0];
}
}
}
}
}
http://jsfiddle.net/mohsinali/npckf9xs/6/
After some struggle I came up with the solution on my own and I fix the issue, I also figure it out that it's always simple we just have to think right. It can be more optimize I believe.
var getInput = ""; var inputsParent = ""; var inputs = ""; var thisInHtml = ""; var getInputVal = "";
var thisTdInnerHtml = ""; var input = ""; var flag = 0; var thisInputVal = ""; var thisTdId = "";
var cellIndex = ""; var thisRowIndex = "";
for(var j=0; j<allTds.length;j++){
allTds[j].ondblclick = function(){
thisInHtml = this.innerHTML;
getInput = document.getElementsByTagName("input");
if(getInput.length === 0){
input = this.innerHTML = "<input id='thisInputId' type='text' value='"+thisInHtml+"' style='width: 100px;'>";
thisTdId = this.id;
cellIndex = this.cellIndex;
var rows = document.getElementsByTagName('tr');
for(var o=0; o<rows.length;o++){
rows[o].ondblclick = function(){
thisRowIndex = this.rowIndex-1;
}
}
}
else if(getInput.length > 0){
for(var k=0; k<getInput.length; k++){
inputsParent = getInput[k].parentNode;
inputs = inputsParent.childNodes[0];
thisInputVal = inputs.value;
inputsParent.removeChild(inputs);
flag = 1;
}
}
if(flag === 1){
var getTdById = document.getElementById(thisTdId);
getTdById.innerHTML = thisInputVal;
if(cellIndex === 0){
proArr[thisRowIndex] = thisInputVal;
}
else if (cellIndex === 1){
proColorArr[thisRowIndex] = thisInputVal;
}
else if (cellIndex === 2){
proPriceArr[thisRowIndex] = thisInputVal;
}
flag = 0;
}
}
}
}
Trying to get the eventlistener to run, i.e. when I select United Kingdom, another selection box will appear to select county (county() function), but for some reason the addEventListener will not call the function, and I can't fathom how to pass the selected country to the county function? Any ideas please.
function countries() {
xmlRequest("countries.xml");
var country_selector = document.createElement("SELECT");
country_selector.id = "cou n tryselection";
document.getElementById("quiz").appendChild(country_selector);
var t = document.getElementById("countryselection");
var c_opt = document.createElement("option");
c_opt.text = "Please select";
c_opt.selected = true;
t.add(c_opt);
c_opt = document.createElement("option");
c_opt.text = "United Kingdom";
c_opt.value = "1";
t.add(c_opt);
document.getElementById("countryselection").addEventListener("change", count y(this.value), false);
var x = xmlDoc.getElementsByTagName("country");
for (i = 0; i < x.length; i++) {
var opt = document.createElement("option");
opt.text = x[i].getElementsByTagName("country_name ")[0].childNodes[0].nodeValue;
t.add(opt);
}
}
function county(Country) {
if (!document.getElementById("countyselection")) {
if (Country === "1") {
xmlRequest("counties.xml");
document.getElementById("quiz").innerHTML += "<select id='countyselection'></select>";
var t = document.getElementById("countyselection");
var y = xmlDoc.getElementsByTagName("county");
for (j = 0; j < y.length; j++)
{
var opt = document.createElement("option");
var txt = y[j].getElementsByTagName("county_name")[0].childNodes[0].nodeValue;
opt.text = txt;
t.add(opt);
}
}
} else {
var f = document.getElementById("countyselection");
document.getElementById("countyselection").parentNode.removeChild(f);
}
}
Because you're calling the function, not referencing it, and you have a space in the function name.
change
document.getElementById("countryselection").addEventListener("change", count y(this.value), false);
to
document.getElementById("countryselection").addEventListener("change", function() {
county(this.value);
}, false);
Also note that things like this
country_selector.id = "cou n tryselection";
is completely invalid, you can't use random text with spaces as an ID
i trie to generate dynamic Input fields with unique Ids but i stucked:
function addTxtBx(){
var txtBxHolder = document.getElementById('txtBoxHolder');
var newTxtBx = document.createElement('input');
newTxtBx.type = 'text';
var i=1;
//newTxtBx.id = document.getElementById("txtWaypoint"[i])
if(i<10){
newTxtBx.id = "txtWaypoint"+[i];
i++;
break;
}
txtBoxHolder.appendChild(newTxtBx);
}
i tried it with a for() but always got Id='name'9,
i know im an trainee. :)
I think so where you miss to loop it properly.
function addTextBox(ops) {
var no = document.getElementById('id1').value;
for (var i = 0; i < Number(no); i++) {
var text = document.createElement('input');
text.type = "text";
text.id = "txtWaypoint" + i; //id created dynamically
document.getElementById('divsection').appendChild(text);
}
}
Try it