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 = " ";
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   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 = " ";
Related
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();}
I'm writing a code that I can add a list element text and delete it when clicking a certain part in the text, using two functions - add_in() and del_in().
so if I click add button, it should add "Reading (del)"
and when I click the text del, it should delete it.
I looked for getting the id of clicked element here, and used event target.
In add_in(), it adds the list element and I change its content using innerHTML so it contains a p element of (del).
the delNode should start del_in() when clicked.
In del_in(), it has addEventListener to get the id of clicked element and if it's a (del), it deletes.
html
<ol id='interests'>
//should be added here.
</ol>
<input type="text" id='add_int'></input>
<input type="button" value="add" id='add_btt' onclick='add_in();'>
javascript
var idcount = 0;
function add_in() {
nodeId = "new" + idcount;
++idcount;
var interest = document.getElementById('add_int').value;
var newNode = document.createElement("li");
newNode.setAttribute("id", nodeId);
newNode.innerHTML = interest + "<p id='del" + nodeId + "'>(del)</p>";
document.getElementById("interests").appendChild(newNode);
var delNode = document.getElementById('del' + nodeId);
delNode.setAttribute("onclick", "del_in();");
}
function del_in() {
var clickId = "";
document.addEventListener("click", function(e) {
clickId = e.target.id;
});
if (clickId.includes("delnew")) {
var clickEle = document.getElementById(clickId);
clickEle.parentNode.removeChild(clickEle);
}
}
It can add, but can't delete. Nothing happens when clicked.
If I type 'newNode' in console, it says: VM247:1 Uncaught ReferenceError: delNode is not defined. ClickId is not defined either after clicking an element.
Thanks for any help in advance.
Let me know if the code looks too complicated or the question looks too half-assed. I'll edit.
var idcount = 0;
function add_in() {
nodeId = "new" + idcount;
++idcount;
var interest = document.getElementById('add_int').value;
var newNode = document.createElement("li");
newNode.setAttribute("id", nodeId);
newNode.innerHTML = interest + "<p id='del" + nodeId + "'>(del)</p>";
document.getElementById("interests").appendChild(newNode);
var delNode = document.getElementById('del' + nodeId);
delNode.setAttribute("onclick", "del_in(this);");
}
function del_in(e) {
e.parentNode.remove();
}
<ol id='interests'>
//should be added here.
</ol>
<input type="text" id='add_int'></input>
<input type="button" value="add" id='add_btt' onclick='add_in();'>
the easy and simplest way you can try select parent element and change it e.parentNode.remove();
I am creating a list using javascript.After every list item, there are two buttons inserted. But these buttons appear only on last list item.Please help me.
My Code
Here is my function which updates the list using JS`
function updateView() {
fetchFromLocal(); //fetches list from local storage and updates TaskList array
list.innerHTML = ""; //list is var that points to unordered list
var checkbox = document.createElement("input");
checkbox.setAttribute('type', 'checkbox');
var btnUp = document.createElement("input");
btnUp.setAttribute('type', 'button');
btnUp.setAttribute('value', '^');
// console.log(btnUp);
var btnDown = document.createElement("input");
btnDown.setAttribute('type', 'button');
btnDown.setAttribute('value', 'v');
for(var i=0;i<TaskList.length;i++)
{
var TempElem = document.createElement("li");
//console.log(TempElem);
TempElem.appendChild(checkbox);
// console.log("Elem after checkbox " + TempElem.innerHTML);
TempElem.innerHTML += " <span class='listitem'> " + TaskList[i] + "</span>";
// console.log("Elem after tasklist "+ TempElem.innerHTML);
TempElem.appendChild(btnUp);
TempElem.appendChild(btnDown);
console.log("Final Tepelem " + TempElem.innerHTML);
list.appendChild(TempElem);
}
}
Because you are appending the same element so since the same element can not be in more than one place it is moved to the new location. You need to clone them before appending.
https://developer.mozilla.org/en-US/docs/Web/API/Node/cloneNode
TempElem.appendChild(checkbox.cloneNode(true));
You need to do it to the buttons also.
I am new in magento,i have to develop extension in magento, in that extension i need to be create dynamically radio button i used following code in javascript in edit.phtml
function createRadio(){
var label = document.createElement("label");
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", 'radio');
element.setAttribute("value",array_resp);
element.setAttribute("name", 'radio');
label.appendChild(element);
label.innerHTML += "Matched Address("+j+"):-"+array_resp;
document.body.appendChild(label);
}
And used button:-
<input type="button" onclick="createRadio()" value="Create radio" />
for calling above function . But it not works.whats wrong in it?please any magento expert give me sugestion.
Thanks in advance.
Demo
Be sure that you are including js function correctly. You can check your browser console for any specific error. Also, check your variables array_resp and j is valid.
I assume your variables like;
array_resp = b, and j = a;
and you can use;
HTML:
JS
window.createRadio = function() {
var label = document.createElement("label");
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", 'radio');
element.setAttribute("value","b");
element.setAttribute("name", 'radio');
label.appendChild(element);
label.innerHTML += "Matched Address(a):-b";
document.body.appendChild(label);
}
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);
}