CODEWITHSUNDEEP
javascripthtml
Enthys
Enthys

Reputation: 305

JavaScript failed to execute 'appendChild' on 'Node' parameter 1 is not of type 'Node'

The idea is that when the screen gets under 800px the element thatare in the questLinks array go in the ul with the id of 'links'.

let isActivated = false;

var questLinks =[
document.createElement("li").textContent ="<li><a href=\"index.php\" class=\"tab\">Home</a></li>",
document.createElement("li").textContent ="<li><a href=\"choose-language.php\" class=\"tab\">Quests</a></li>",
document.createElement("li").textContent ="<li><a href=\"battlesequence.php\" class=\"tab\">Battle arena</a></li>",
document.createElement("li").textContent ="<li><a href=\"ranking.php\" class=\"tab\">Rankings</a></li>",
document.createElement("li").textContent ="<li><a href=\"clanPage.php\" class=\"tab\">Clan</a></li>",
document.createElement("li").textContent ="<li><a href=\"profile.php\" class=\"tab\">Profile</a></li>",
document.createElement("li").textContent ="<li><a href=\"AboutUs.php\" class=\"tab\">About</a></li>",
document.createElement("li").textContent ="<li><a href=\"contactus.php\" class=\"tab\">Contact us</a></li>"
];

function move() {
	var headerList = document.getElementById('list');

	if (document.getElementById("bod").clientWidth <= 800 ) {
		console.log("Width < 800");
		if (isActivated == false) {
			console.log("isActivated = " + isActivated);
			for (link of questLinks) {
				console.log("There he is.");
				headerList.appendChild(link);
			}
			isActivated = true;
		}

	}
}

This code results in the error: " JavaScript failed to execute 'appendChild' on 'Node' parameter 1 is not of type 'Node' "

Upvotes: 1

Views: 3575

Answers (2)

Thejaka Maldeniya
Thejaka Maldeniya

Reputation: 1076

Try this:

var questLinks =
[
    "<li><a href=\"index.php\" class=\"tab\">Home</a></li>",
    "<li><a href=\"choose-language.php\" class=\"tab\">Quests</a></li>",
    "<li><a href=\"battlesequence.php\" class=\"tab\">Battle arena</a></li>",
    "<li><a href=\"ranking.php\" class=\"tab\">Rankings</a></li>",
    "<li><a href=\"clanPage.php\" class=\"tab\">Clan</a></li>",
    "<li><a href=\"profile.php\" class=\"tab\">Profile</a></li>",
    "<li><a href=\"AboutUs.php\" class=\"tab\">About</a></li>",
    "<li><a href=\"contactus.php\" class=\"tab\">Contact us</a></li>"
].map(function(x){
    var l=document.createElement("li")
    l.textContent=x
    return l
})

Upvotes: 0

Pointy
Pointy

Reputation: 413702

What you're building here is not what you think it is:

var questLinks =[
document.createElement("li").textContent ="<li><a href=\"index.php\" class=\"tab\">Home</a></li>",
document.createElement("li").textContent ="<li><a href=\"choose-language.php\" class=\"tab\">Quests</a></li>",
document.createElement("li").textContent ="<li><a href=\"battlesequence.php\" class=\"tab\">Battle arena</a></li>",
document.createElement("li").textContent ="<li><a href=\"ranking.php\" class=\"tab\">Rankings</a></li>",
document.createElement("li").textContent ="<li><a href=\"clanPage.php\" class=\"tab\">Clan</a></li>",
document.createElement("li").textContent ="<li><a href=\"profile.php\" class=\"tab\">Profile</a></li>",
document.createElement("li").textContent ="<li><a href=\"AboutUs.php\" class=\"tab\">About</a></li>",
document.createElement("li").textContent ="<li><a href=\"contactus.php\" class=\"tab\">Contact us</a></li>"
];

That questLinks variable will end up being an array of strings, not an array of elements. An expression like this:

document.createElement("li").textContent ="<li><a href=\"index.php\" class=\"tab\">Home</a></li>"

has as its value the right-hand side of the = sign. Your code is creating elements, but because all that matters is the final value of the expression, the elements are all discarded and you're left with an array of the strings on the right-hand side of those assignments.

What you can do is create a function that creates and initializes your elements:

function makeLink(content) {
  var li = document.createElement("li");
  li.innerHTML = content;
  return li;
}

var questLinks = [
    makeLink("<a href=\"index.php\" class=\"tab\">Home</a>"),
    makeLink("<a href=\"choose-language.php\" class=\"tab\">Quests</a>"),
    makeLink("<a href=\"battlesequence.php\" class=\"tab\">Battle arena</a>"),
    makeLink("<a href=\"ranking.php\" class=\"tab\">Rankings</a>"),
    makeLink("<a href=\"clanPage.php\" class=\"tab\">Clan</a>"),
    makeLink("<a href=\"profile.php\" class=\"tab\">Profile</a>"),
    makeLink("<a href=\"AboutUs.php\" class=\"tab\">About</a>"),
    makeLink("<a href=\"contactus.php\" class=\"tab\">Contact us</a>")
];

(Note that you really want to be setting the innerHTML property and not textContent because you're adding HTML markup, and that you don't need to include <li> or </li> in the content.)

Obviously you could refine the function and save yourself some typing by having the function also build the <a> links from the URL and the label.

Upvotes: 2

Related Questions