Develop Reference

Two HTML buttons set the same way but one doesn't work

I'm making a dynamic form where the user an add and remove inputs from buttons, however one of these buttons does have a onclick event while the other doesn't despite them being set up exactly set up the same.
I've tried using <button> and changing the function to a console.log but the "Add Answer Option" button never gets an onclick event.
//add and remove buttons
var addButton = document.createElement('input'); addButton.type = "button"
var removeButton = document.createElement('input'); removeButton.type = "button"
addButton.value = "Add Answer Option";
removeButton.value = "Remove Answer Option";
var buttonLi = document.createElement('li');
buttonLi.innerHTML = "<br>"
buttonLi.appendChild(addButton);
buttonLi.innerHTML += ' ';
buttonLi.appendChild(removeButton);
var buttonUL = document.createElement('ul');
this.mainElement.appendChild(buttonUL);
buttonLi.style = "list-style-type: none;";
buttonUL.appendChild(buttonLi);
addButton.onclick = function() {quiz.questions[id].addAnswerOption();}
removeButton.onclick = function() {quiz.questions[id].removeAnswerOption();}
JS Fiddle: https://jsfiddle.net/bh7tsxqu/
The Add button should add an answer option but it does not. The remove button should remove answer options and it does.

You are using innerHtml property to add content. It removes the listeners when you add a space between buttons. To make your code work remove this line:
buttonLi.innerHTML += ' ';
and use CSS to add a space between buttons.
Or you can use the insertAdjacentHTML method for adding the space between buttons.
buttonLi.insertAdjacentHTML('beforeend',' ');
You can read more about it here: innerHTML

I just gave the buttons IDs and used those IDs as selectors for the addition of your onclick event.
Specifically this is what I added.
var rmButID = document.getElementById('rmBut');
var addButID = document.getElementById('addBut');
And this is what I modified.
var addButton = document.createElement('input'); addButton.type = "button"; addButton.id = "addBut"
var removeButton = document.createElement('input'); removeButton.type = "button"; removeButton.id = "rmBut"
Here it is all together.
var addButton = document.createElement('input'); addButton.type = "button"; addButton.id = "addBut"
var removeButton = document.createElement('input'); removeButton.type = "button"; removeButton.id = "rmBut"
addButton.value = "Add Answer Option";
removeButton.value = "Remove Answer Option";
var buttonLi = document.createElement('li');
buttonLi.innerHTML = "<br>"
buttonLi.appendChild(addButton);
buttonLi.innerHTML += ' ';
buttonLi.appendChild(removeButton);
var buttonUL = document.createElement('ul');
this.mainElement.appendChild(buttonUL);
buttonLi.style = "list-style-type: none;";
buttonUL.appendChild(buttonLi);
var rmButID = document.getElementById('rmBut');
var addButID = document.getElementById('addBut');
addButID.onclick = function() {quiz.questions[id].addAnswerOption();}
rmButID.onclick = function() {quiz.questions[id].removeAnswerOption();}

How to change the label of a checkbox in JavaScript?

Note: Willing to use jQuery, whatever is easier.
I have a form which when submitted, creates a checkbox input. The text of the checkbox should be equal to that of another text input when the form is submitted.
The checkbox is created as expected when I submit the form but it is blank and doesn't contain the text from the corresponding text area.
For a checkbox i'm not sure if I should be using .text, .innerhtml, .val etc and the previous questions I saw on here seemed unnecessarily complicated.
HTML:
<div id="listContainer">
<form id="listForm">
<input type="submit" value="Add">
<input id="listInput" class="textarea" placeholder="Add your list item here, then click submit.">
<div id="checkboxContainer">
</div>
</form>
</div>
JS:
//ADD LIST ITEM
$("#listForm").submit(function(ev) {
ev.preventDefault();
if ($("#listInput").val() == "") {
alert("Please enter the item name, then click 'Add'.");
} else {
listCount++;
var input = $("#listInput").val();
console.log("List Count: " + listCount);
console.log(input);
var cb = document.createElement('input');
cb.id = 'input' + listCount;
cb.type = 'checkbox';
document.getElementById("checkboxContainer").appendChild(cb);
var label = document.createElement('label');
label.id = 'label' + listCount;
$("#label" + listCount).attr("for", "input" + listCount).html(input);
document.getElementById("checkboxContainer").appendChild(label);
//Store the list count
localStorage.setItem("listCount", listCount);
//Store the list title
localStorage.setItem("input" + listCount, input); //"Note " + noteCount + ": " +
this.submit();
}
});

var label = document.createElement('label');
label.id = 'label' + listCount;
$("#label" + listCount).attr("for", "input" + listCount).html(input);
document.getElementById("checkboxContainer").appendChild(label);
These four lines can be cleaned up and fixed. The issue here is quite simple, however your constant back-and-forth between jQuery and plain JS makes things very difficult to read. I would suggest writing DOM manipulation in one or the other, but never both.
The error here is on the third line, which uses the selector $("label" + listCount). This selector will look for this element on the page, however you've only created the element - you haven't added it to the page yet.
Let's correct this and rewrite it in jQuery:
$("<label />") //create new label
.attr("id", "label" + listCount) //set ID
.attr("for", "input" + listCount) //set For
.html(input) //set contents
.appendTo("#checkboxContainer"); //add to checkbox container
Consider using the example above to rewrite your checkbox creation as well, that way you can avoid the mixture of jQuery/plain JS.

Dynamically create and append tab space in Javascript

I am trying to dynamically create a form and I need to append a Tab space between two elements. The only issue I guess with this is the tag(createElement(...)) that needs to be placed. Also please note that I have omitted many other elements that the form will be holding
function createStreamForm()
{
$(".toolbox-titlex").show();
$(".panel").show();
var Streamtype = document.createElement("div");
var br = document.createElement("br");
var streamlbl = document.createElement("label");
var streamtypelbl = document.createElement("label");
var PredefStreamdiv = document.createElement("div");
var tabspace = document.createElement("label");
Streamtype.type = "text";
Streamtype.id="Streamtype";
Streamtype.className = "streamType";
streamlbl.className = "lblstreamProp";
streamlbl.innerHTML = "Stream: ";
PredefStreamdiv.id = "PredefinedStream";
tabspace.innerHTML = "&nbsp";
lot.appendChild(Streamtype);
lot.appendChild(tabspace);
lot.appendChild(streamlbl);
lot.appendChild(streamtypelbl);
lot.appendChild(br);
lot.appendChild(PredefStreamdiv);
createattr();
$(".streamType").append(showStreamType());
$(".queryPanel").
hide();
}
Here I've tried using &nbsp in place of a tabspace but it doesn't work.

Along with this solution " "
to create space between two dynamically created elements, you can also create any element for example span also which should not be block level element. For example to create space between checkbox and label which are created dynamically
var cb = document.createElement("input");
var label = document.createElement("label");
var span = document.createElement("span");
append(li,cb);
append(li,span);
append(li,label);
span.innerHTML = " ";

JavaScript Add Textbox Dynamically when Button onClick

I am trying to add a new textbox when add button is onclick using JavaScript. Here is my HTML:
htmlStr += "<div id='filterContent' style='width:100%;text-align:center;'>";
htmlStr += "<input id='startLoc' type='text' />";
htmlStr += "<input id='endLoc' type='text' />";
htmlStr += "<input id='addLoc' type='button' value='Add' onClick='addTextBox()' />";
htmlStr += "</div><br/>";
And here is my JavaScript to add a new textbox when button is onClick:
function addTextBox(){
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
//element.setAttribute("style", "width:200px");
var foo = document.getElementById("filterContent");
foo.appendChild(element);
}
It works perfectly to add as many textbox as I want. But somehow the textbox created share the same id. I wonder is that possible to add many textbox with different ID each time when the button is onClick?
Thanks in advance.

var aa=Math.random();
<input id='addLoc"+aa+"' type='text' />
User math.random to generate random id's for a textbox

Using your current setup you could keep track of an id increment in a global:
//outside function
var idIndex = 1;
function addTextBox(){
var element = document.createElement("input");
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
element.setAttribute("id", "addLoc" + idIndex++);
element.setAttribute("style", "width:200px");
element.onclick = function()
{
//do something
}
var foo = document.getElementById("filterContent");
foo.appendChild(element);
}
EDIT: To answer the question in this answer's comments. It is certainly possible to add a different onclick handler for every new textbox (although you're probably better off designing your handlers so you can use a single handler for all but if you wanted for some reason to use a different one you could bind an anonymous function to the handler, I have added an approach above).
EDIT2: Regarding the second question in the path there are two approaches you could use. Instead of calling the separate functions getFirstPath() getSecondPath() etc. individually, you could have a single function called getPath() and pass the index to it as a parameter:
var getPath = function(index) {
switch(index)
{
case 1:
return getFirstPath();
break;
case 2:
return getSecondPath();
break; //and so on.
}
}
And then your onclick would look like this:
element.onclick = function()
{
getPath(index);
}

Get value of dynamically created textbox using JavaScript

I'm using JavaScript to dynamically add rows to a table, I create some textboxes in each row, I've added an onkeyup event to one of my textboxes:
var myTotal = "1";
var spanTotal = document.createElement("span");
spanTotal.innerHTML = "<input style=\"width:50px\" type=\"text\" name=\"total\" value=" + myTotal + ">";
spanCount.onkeyup = function ()
{
alert(spanTotal.innerHTML);
};
then I add this span (which is rendered as an HTML textbox) to my table row. I want to have value of my dynamically created textbox, but whenever I change this textbox, initial value of this textbox is displayed in alert box (i.e. 1). Initial value of this textbox is "1", but when I change it (for instance type a 0 in textbox), again "1" is displyaed in alert box. I want to have value of my dynamically created textbox, should I give an ID to my span? how should I define spanCount.onkeyup function? where should it be defined so that I can have exact value of this textbox?

I created a jsFiddle. You can get value of input box using childNodes. There are other problems in code you were using spanCount istead of spanTotal.
Modified code:
var myTotal = "1";
var spanTotal = document.createElement("span");
spanTotal.innerHTML = "<input style=\"width:50px\" type=\"text\" name=\"total\" value=" + myTotal + ">";
document.body.appendChild(spanTotal);
spanTotal.onkeyup = function() {
alert(spanTotal.childNodes[0].value);
};​

Below modified code maybe can solve your problem:
var myTotal = 1;
/* object creation */
var span = document.createElement('span');
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('name', 'total');
input.setAttribute('style', 'width:50px;');
input.setAttribute('value', myTotal);
// append each object to respective container
span.appendChild(input);
document.appendChild(span);
/* event handler */
input.onkeyup = function(){
alert(this.value);
}