.addEventListener is not a function even with DOMContent loaded

.addEventListener is not a function even with DOMContent loaded
0

#1

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


#2

I am not seeing any addEventListener code in your Codepen. Did you link the right one? If not, just edit your original post with the correct Codepen.


#3

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.


#4

You have a lot of typos in your solution which are giving you trouble here. First of all, you need to move the event handler for the “New Quote” button outside of your newQuote function. Then instead of call makeRequest via the “click” event, you want to call neQuote.

Now, inside the newQuote function, you have a typo in the following line:

httpRequest.onReadyStateChange = randomQuote;

It should be onreadystatechange (all lowercase).

Next, in the following line:

if(httpRequest.readyState === XMLHtttpRequest.DONE){

you should have written httpRequest.DONE.

Then, finally in the following line:

alert(http.responseText)

there is no variable called http, but you do have httpRequest which will work perfectly here.


#5

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.


#6

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.