Cannot read property 'parentNode' of null error with plain javascript - 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+')');

Related

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 .

InnerHTML dissapearing on setInterval Function

I have written a simple script and it's job is to change a innerHTML of a random element in one section of the page. Somehow when I call the function, and set it to fire every 1 second, when innerHTML of a specific element is changed, it doesn't stay that way , it just clears itself and moves on to another element. Can anyone help me with this. Here is the code, thanks in advance.
window.onload = function() {
var box1 = document.getElementById("one");
var box2 = document.getElementById("two");
var box3 = document.getElementById("three");
var box4 = document.getElementById("four");
var box5 = document.getElementById("five");
var box6 = document.getElementById("six");
var box7 = document.getElementById("seven");
var box8 = document.getElementById("eight");
var headingArray = ["RAVE", "RUN", "PAINT"];
var iconArray = ["ion-usb", "ion-android-walk", "ion-android-color-palette"];
var paragraphArray = ["Wanna good time? <br> Check out nearest party centres","Check out running tracks", "Ckeck out painting places"];
var boxArray = [box1,box2,box3,box4,box5,box6,box7,box8];
var heading = document.createElement("h2");
var icon = document.createElement("i");
var paragraph = document.createElement("p");
function getRandomNumberForContent() {
var randomHeading = Math.round(Math.random()*2) + 0;
return randomHeading;
}
function getRandomNumberForBox() {
var randomNumber = Math.round(Math.random()*7) + 0;
return randomNumber;
}
function changeBox() {
var random = getRandomNumberForContent();
heading.innerHTML = headingArray[random];
icon.className = "icon "+iconArray[random]+" big";
paragraph.innerHTML = paragraphArray[random];
var randomNum = getRandomNumberForBox();
boxArray[randomNum].innerHTML = "";
boxArray[randomNum].appendChild(heading);
boxArray[randomNum].appendChild(icon);
boxArray[randomNum].appendChild(paragraph);
}
setInterval(changeBox,1000);
}
You are somewhat moving the element to the new div each time the function is called, because you are assigning as a child the same element, not a copy of it.
You should create the new element inside the changeBox function.
That's the answer. If you create it outside the function, they will be a unique element that you are assigning either to one div or another.
I assume that it moves to another element because you append the same elements somewhere else. You could clone the elements when you append them:
boxArray[randomNum].appendChild(heading.cloneNode(true));
boxArray[randomNum].appendChild(icon.cloneNode(true));
boxArray[randomNum].appendChild(paragraph.cloneNode(true));

Javascript, onclick, Uncaught ReferenceError: FAVOURITES is not defined

I have an Uncaught ReferenceError: FAVOURITES is not defined(onclick), i don't understand where is my sintax error in button.setAttribute("onclick", "ContactLoader.table(" + table +")");.
ContactLoader.table =
function(table){
ContactLoader.CURRENT_PATTERN = null;
ContactLoader.CURRENT_TABLE = table;
ContactLoader.CURRENT_LETTER = "A";
ContactLoader.loadData();
}
function generateSearchLetter(){
var divSearch = document.getElementById("search");
if(divSearch.lastChild.id === "search_name");
divSearch.removeChild(divSearch.lastChild);
var divSearchLetter = document.createElement('div');
divSearchLetter.setAttribute("id", "search_letter");
divSearch.appendChild(divSearchLetter);
var divAllFav = document.createElement('div');
divAllFav.setAttribute("class", "search_all_favourites");
divSearchLetter.appendChild(divAllFav);
var arr1 = new Array("ALL","FAVOURITES");
for(var i=0; i<2; i++){
var button = document.createElement('div');
var textNode = document.createTextNode(arr1[i]);
button.appendChild(textNode);
var table = button.textContent;
button.setAttribute("class" , "letterAF");
button.setAttribute("onclick", "ContactLoader.table(" + table +")");
divAllFav.appendChild(button);
}
}
As you're trying to bind an event to a DOM element, it's not a good idea to bind click event using setAttribute. This approach is been deprecated since many years ago.
To bind the click event to the button variable, it is better to replace:
button.setAttribute("onclick", "ContactLoader.table(" + table +")");
with
button.addEventListener("click", function () {
ContactLoader.table(table);
});

Setting ID input (DOM) issue

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);
}

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