Setting ID input (DOM) issue - javascript

I wonder why this won't work. I'm trying to set an ID on two input-field, so I can grab it, then use it in a function. I can create the elements and then set an ID, but my task requires me to do it this way (School project).
var div = document.getElementById('div');
var p = document.createElement('p');
var butt = document.createElement('input');
var inputOne = document.createElement('input');
var inputTwo = document.createElement('input');
div.appendChild(inputOne);
div.appendChild(inputTwo);
inputOne.SetAttribute="type","text";
inputOne.placeholder="Something";
inputTwo.SetAttribute="type","number";
inputTwo.placeholder="SomethingElese";
butt.type="button";
butt.value="clickMe!";
div.appendChild(butt);
butt.onclick=func();
inputOne.SetAttribute="id","MyID";
function func(){
var text = document.getElementById('MyID').value;
alert(text);
}

Because of the errors.
var div = document.getElementById('div');
var p = document.createElement('p');
var butt = document.createElement('input'); // really? I can think of better names
var inputOne = document.createElement('input');
var inputTwo = document.createElement('input');
div.appendChild(inputOne);
div.appendChild(inputTwo);
inputOne.setAttribute("type","text"); // call this as a function with a lowercase "setAttribute"
inputOne.placeholder="Something";
inputTwo.setAttribute("type","number"); // this too
inputTwo.placeholder="SomethingElese";
butt.type="button";
butt.value="clickMe!";
div.appendChild(butt);
butt.onclick=func; // pass the function by reference, not calling it
inputOne.setAttribute("id","MyID"); // again

I got it working now. Here's the result code - Thanks!
var div = document.getElementById('myDiv');
var butt= document.createElement('input');
var inputOne = document.createElement('input');
var inputTwo = document.createElement('input');
div.appendChild(inputOne);
div.appendChild(inputTwo);
inputOne.setAttribute("type","text");
inputOne.placeholder="Something";
inputTwo.setAttribute("type","number");
inputTwo.placeholder="SomethingElse";
butt.type="button";
butt.value="ClickMe";
div.appendChild(butt);
butt.onclick=func;
inputOne.setAttribute("id","MyID");
function func(){
var text = document.getElementById('MyID').value;
alert(text);
}

Related

Cannot read property 'parentNode' of null error with plain javascript

I am creating new element by javascript and appending it to already existing div:
function addElement(){
var dodato = document.getElementById('dodato');
var input = document.getElementById('input');
if(input.value!==""){
var div = document.createElement('div');
dodato.appendChild(div);
var ele = dodato.lastChild;
ele.style.width = "200px";
ele.style.float = "left";
ele.innerHTML = input.value;
ele.id = input.value;
var deletE = document.createElement('span');
ele.appendChild(deletE);
var deletEe = ele.lastChild;
deletEe.innerHTML = 'X';
deletEe.style.color = "red";
deletEe.style.float = 'right';
deletEe.setAttribute('onclick','deleteE('+input.value+')');
}
}
dodato is div where I add all new elements and all of those elements have different id
By clicking on span I call new function to delete some added element with specific id.
function deleteE(delete_value){
var dodato = document.getElementById('dodato');
var el = document.getElementById(delete_value);
dodato.removeChild(el);
}
The error I keep getting is:
Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
dodato.removeChild(el);
In your first code snippet, you say
deletEe.setAttribute('onclick','deleteE('+input.value+')');
And in deleteE you then say:
var el = document.getElementById(delete_value);
So you try to get an elementById with its value, not its id. Change
deletEe.setAttribute('onclick','deleteE('+input.value+')');
to
deletEe.setAttribute('onclick','deleteE('+input.id+')');

How to add an element to another one(instead of using selector)

I found in Document that I can create an element and add another one to it like:
var sel = document.createElement("select");
var opt1 = document.createElement("option");
var opt2 = document.createElement("option");
opt1.value = "1";
opt1.text = "Option: Value 1";
opt2.value = "2";
opt2.text = "Option: Value 2";
sel.add(opt1, null);
sel.add(opt2, null);
But when I tried to apply it to practice, this method doesn't work, newUser was not added to newDiv successfully:
function createOnEle(imgSrc, user, extract) {
var newDiv = document.createElement("div");
var newUser = document.createElement("span");
newUser.textContent = user;
newDiv.add(newUser);
}
It seems that add method doesn't work for div and span, if this is true, how to achieve it? Otherwise, Where did I wrong?
.add is a method of select-element which is used to add an option-element to it.
Refer HTMLSelectElement.add()
Use .appendChild()
The Node.appendChild() method adds a node to the end of the list of children of a specified parent node.
function createOnEle(user) {
var newDiv = document.createElement("div");
var newUser = document.createElement("span");
newUser.textContent = user;
newDiv.appendChild(newUser);
document.body.appendChild(newDiv);
}
createOnEle('RogB :)')
function createOnEle(imgSrc, user, extract) {
var newDiv = document.createElement("div");
var newUser = document.createElement("span");
newUser.textContent = user;
newDiv.innerHTML=newUser;
}
This should also work as per your requirement .

Created span in javascript is showing as [object HTMLSpanElement] in webpage

I created a span tag in javascript and using .innerHTML i'm trying to append it into another tag. but in webpage it is showing as [object HTMLSpanElement].
var text = "Accessor Properties Example";
var enteredText = 'Prop';
var data = text.split(enteredText);
var pTag = document.getElementById('ab');
var newSpan = document.createElement('span');
newSpan.setAttribute('class','highlight');
newSpan.innerHTML=enteredText;
console.log(newSpan)
var plainText = data[0]+newSpan+data[1];
pTag.innerHTML = plainText;
.highlight {color:#1a0dab;font-weight:bold}
<p id="ab"></p>
You're trying to insert an object reference into a string. You can get the HTML that represents the span and add the 3 pieces of information together before setting the innerHTML of your target.
var text = "Accessor Properties Example";
var enteredText = 'Prop';
var data = text.split(enteredText);
var pTag = document.getElementById('ab');
var newSpan = document.createElement('span');
newSpan.setAttribute('class','highlight');
newSpan.innerHTML=enteredText;
console.log(newSpan)
var plainText = data[0]+ newSpan.outerHTML +data[1]; // <- Change made here
pTag.innerHTML = plainText;
.highlight {color:#1a0dab;font-weight:bold}
<p id="ab"></p>
That's because you are concatenating strings with a DOM element, which is coerced into a string too.
Instead, you should use appendChild:
pTag.innerHTML = ''; // Remove existing contents
pTag.appendChild(document.createTextNode(data[0]));
pTag.appendChild(newSpan);
pTag.appendChild(document.createTextNode(data[1]));
var text = "Accessor Properties Example",
enteredText = 'Prop',
data = text.split(enteredText),
pTag = document.getElementById('ab'),
newSpan = document.createElement('span');
newSpan.className = 'highlight';
newSpan.textContent = enteredText;
pTag.innerHTML = '';
pTag.appendChild(document.createTextNode(data[0]));
pTag.appendChild(newSpan);
pTag.appendChild(document.createTextNode(data[1]));
.highlight {color:#1a0dab;font-weight:bold}
<p id="ab"></p>

Create JQuery Mobile button using JavaScript

I need help to create jQuery mobile button using JavaScript, I am using the code below, it creates a button but it is not recognizing the jQuery mobile style.
thanks for your help :)
function SubmitForm() {
var list = document.getElementById("forMore"); // Get the <ul> element with id="forMore"
if (list.hasChildNodes()) { // It has at least one
list.removeChild(list.childNodes[0]);
}
var e = document.getElementById("services");
var strUser = e.options[e.selectedIndex].value;
var id = e.options[e.selectedIndex].id;
document.getElementById("desc").innerHTML = strUser;
document.getElementById("fields").style.visibility = "visible";
var td = document.getElementById('forMore');
var btn = document.createElement('input');
btn.setAttribute("data-role", "button");
btn.setAttribute("data-theme", "b");
btn.setAttribute("class", "ui-input-btn");
btn.style.cssFloat = "left";
btn.style.fontSize = "18px";
btn.style.fontFamily = "myAccountFont";
btn.style.color = "green";
btn.onclick = function () {
location.href = "/Pin/SendVas?id=" + id;
};
btn.value = "تفعيل";
td.appendChild(btn);
}
hope this will help:
var a = document.createElement("A");
a.appendChild(document.createTextNode("Name"));
a.setAttribute("data-role","button");
a.setAttribute("data-inline","true");
a.setAttribute("data-corner","false");
$(td).append(a).trigger('create');
//Or user parent container:
$("#container").trigger('create');

removing child from a child

I am having trouble removing the child of a child of an object created using JS.
Basically once I create a comment object I appendChild(replyBox) to it. Inside the replyBox there is a cancel button which is supposed to completely delete the replyBox.
Here is the code :
function Comment(message){
var self = this;
var message = message;
var comment = document.createElement("li");
comment.id = "comment";
comment.style = "display: none;";
comment.textContent = message;
createButtons(comment);
var parent = document.getElementById("wall");
parent.appendChild(comment);
return comment;
}
function deleteComment(comment){
var parent = document.getElementById("wall");
parent.removeChild(comment);
}
function newReply(comment){
var buttons = comment.getElementsByTagName("input");
buttons.item(0).disabled="disabled";
var replyBox = document.createElement("div");
replyBox.id="replyBox";
var replyTxt = document.createElement("input");
replyTxt.type="text";
replyTxt.value="Write a reply";
replyTxt.onfocus = "if(this.value==this.defaultValue) this.value='';" ;
replyTxt.onblur="if(this.value=='') this.value=this.defaultValue;";
replyBox.appendChild(replyTxt);
createButtons(replyBox);
comment.appendChild(replyBox);
}
function createButtons(parent){
var button = document.createElement("input");
button.type = "submit";
if(parent.id=="comment"){
var reply = button.cloneNode();
reply.value = "reply";
reply.addEventListener("click", function(){newReply(parent)},false);
parent.appendChild(reply);
var deleteBtn = button.cloneNode();
deleteBtn.value = "delete";
deleteBtn.addEventListener("click", function(){deleteComment(parent)},false);
parent.appendChild(deleteBtn);
}
else{
var submitBtn = button.cloneNode();
submitBtn.value = "submit";
//reply.addEventListener("click", function(){newReply(parent)},false);
parent.appendChild(submitBtn);
var cancel = button.cloneNode();
cancel.value = "cancel";
cancel.addEventListener("click", function(){cancel(parent)},false);
parent.appendChild(cancel);
}
}
function cancel(replyBox){
replyBox.parentNode.removeChild(replyBox);
}
cancel.addEventListener("click", function(){cancel(parent)},false);
Which cancel is which? You have an object called cancel as well as a function with the same name. Try renaming one.
I see a problem here:
comment.id = "comment";
If you're setting all IDs of the comment elements to comment, the DOM may be getting confused.

Categories