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