.addEventListener is not a function even with DOMContent loaded

When I try to use a function I get the error .addEventListener is not a function.
I think .addEventListener isn’t being found as a function because it is not finding the class in my html. but I added document.addEventListener(“DOMContentLoaded”, function(event) {

}); after it so the function with the addEventListener should only work after all the html is loaded. It still doesn’t work and I’m not exactly sure why. Does anyone know how I can solve this or if there is a better way to do this?

My codepen is here with it in the javascript https://codepen.io/icewizard/pen/xpdpWK

Sorry forgot to save. It should be there now. On stackoverflow the closest answer to my problem I’ve found is to rearrange my script and put it after my html, but on codepen I can’t do this. I want to know how to solve this issue on codepen though since I’ve seen the same code before work, but using jquery.

okay I fixed the issue. I’m using query selector to select my element instead of getelementbyclassname to select it. When I use getelementbyclassname I have to loop through it even though I only have on element.

2 Likes

wow thank you very much. I wouldn’t have noticed all of those until later but I just fixed all of that and I’m getting my responses back succesfully from the api now. I really appreciate the help thank you very much.