I have created a few html elements (span) inside javascript with the help of document.createElement, but I'm not able to add an event listener. When I try to retrieve those elements through document.getElementByName("span"), it returns an empty node list. I guess the elements are not available when loaded initially since I create those later. How can I retrieve those and add an event listener?
script.js
const items = ["Candles", "Decorations", "Chocolate"]
const checklist = document.getElementById("checklist")
const input = document.getElementById("newele");
function newElement(value){
let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
p.innerText = value;
let i = document.createElement("i");
i.classList.add("fas", "fa-times");
span.appendChild(i);
div.classList.add("checklist-item");
div.appendChild(p);
div.appendChild(span);
return div;
}
items.forEach((item) => {
let p = newElement(item);
checklist.appendChild(p);
});
let icon = document.getElementsByName("span");
console.log(icon);
index.js
<html>
<head>
<link rel="stylesheet" href="index.css">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V"
crossorigin="anonymous"
/>
</head>
<body>
<h1>Christmas Shopping List</h1>
<div>
<label for="newele">Add new item</label>
<input type="text" id="newele"></input>
</div>
<div class="checklist" id="checklist"></div>
<script src="index.pack.js"></script>
</body>
</html>
as has already been correctly pointed out, a small error. But it might be more interesting to use a different selector function. If you select via the tag name, you get a collection. That means you still have to work with a key to address the right element. if you only have one span element then it would be [0]. But then my favourite method would be querySelector. Take a look in this small example:
const span1 = document.getElementsByTagName('span');
console.log(span1[0]);
const span2 = document.querySelector('span');
console.log(span2)<span>hello</span>The problem is because of the selector method that you have been used. You should use getElementsByTagName("span"); rather than document.getElementsByName("span");