<!DOCTYPE html>
<html>
<head>
<title>Learning About Nodes</title>
</head>
<body>
<ul>
<li>Hammerhead</li>
<li>Tiger</li>
<li>Great White</li>
</ul>
<button id="btn">Just do it</button>
</body>
</html>btnElement = document.getElementById("#btn");
if (btnElement) {
btnElement.addEventlistener("click", justdoitFunction);
}
function justdoitFunction() {
const ul2 = document.createElement("ul");
document.body.appendChild(ul);
const listElement = document.createElement("li");
listElement.textContent = "This is done by Panda.";
ul2.appendChild(listElement);
}
I am trying to add a text content using the just do it button. I don't see what the mistake is. Help is greatly appreciated.
I have found some syntax errors, so i fixed it here:
const btnElement = document.getElementById("btn");
function justdoitFunction() {
const ul = document.createElement("ul");
document.body.appendChild(ul);
const listElement = document.createElement("li");
listElement.textContent = "This is done by Panda.";
ul.appendChild(listElement);
}
if (btnElement) {
btnElement.addEventListener("click", justdoitFunction);
}
But I can see that you are trying to insert an item into a ul list. Instead of creating a new whole list each time you click the button, try to select the existing list and add the item there:
<!DOCTYPE html>
<html>
<head>
<title>Learning About Nodes</title>
</head>
<body>
<ul id="list">
<li>Hammerhead</li>
<li>Tiger</li>
<li>Great White</li>
</ul>
<button id="btn">Just do it</button>
</body>
</html>
const btnElement = document.getElementById("btn");
function justdoitFunction() {
const ul = document.getElementById("list");
const listElement = document.createElement("li");
listElement.textContent = "This is done by Panda.";
ul.appendChild(listElement);
}
if (btnElement) {
btnElement.addEventListener("click", justdoitFunction);
}