Making an input that adds to a list

Question

I am trying to make an input text and a button when pressed will add to a ul list but I keep having this error in the console and I don't know why

Uncaught TypeError: btn.addEventListener is not a function at script.js:5

Code :

var text = document.getElementsByClassName('text');
var list = document.querySelector('.list');
var btn = document.getElementsByClassName('add');

btn.addEventListener("click", function(){
    var content = document.createElement('li')
    content.innerText = text.value
    list.append(content)
})

I believe the method `getElementsByClassName` will return an array that's why you are encountering that error. — catzilla, Oct 19 '21 at 12:47
[`getElementsByClassName` returns a live HTML collection](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). You can't add an event listener to a list of things. — Andy, Oct 19 '21 at 12:48
Use `btn[0].addEventListener` because `getElementsByClassName` returns collection, not a single element you can add event to. — Xeelley, Oct 19 '21 at 12:49
add [0] after `btn` like this `btn[0].addEventListener` and everything will work — Amir Rahman, Oct 19 '21 at 12:50
yup after using querySelector it is fixed but the list item is undefined — MIDAROU, Oct 19 '21 at 12:51

score 0 · Answer 1 · answered Oct 19 '21 at 12:57

You are getting this error because getElementsByClassName returns an array of all elements having the given class. To solve this error you have two options:

Make add id instead of class and use getElementById to get that element.

var btn = document.getElementById('add');
If you do not want to make add id, we know getElementsByClassName returns an array you can access the elements inside this array by its index.

var btn = document.getElementsByClassName('add')[0];

In this case, keep in mind that the button you are trying to access with add class should be the first element with this classname.

Making an input that adds to a list

1 Answers1