Why am I getting Error message: addEventListener is not a function

JavaScript
1

Hello,

I am adding an addEventListener function to a (video) DIV so that when people click on the Thumbnail of the Video, it will open up and start paying in the main Video window.

You can see it here:
https://www.anoox.com/ask_answer/ask_discuss.php

So click on the Embed Video button and copy & paste iframe Video, say from YouTube, such as:

//<iframe width="853" height="480" src="https://www.youtube.com/embed/AJm8PeWkiEU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

upon doing this the JS function: embed_video ()
will throw Error: Uncaught TypeError: target_div.addEventListener is not a function
at embed_video (ask_discuss.php:329)

Why? I have checked it 10 different ways and of course addEventListener is how we add dynamically a function to a DIV. So what is wrong?

Thanks.

2

Hi @WorldNews, target_div is a string, not an HTML element. Did you mean

var target_div = document.getElementById('video_box')

?

3

@WorldNews, when you copy and paste html code here without formatting it properly, it won’t show up. I did it this time, but next time you want to post some code, just place three backticks (`) on the line before the code, and three backticks on the line after. :slight_smile:

4

Well right now:
var target_div = ‘video_box’;
so it is a variable that is to contain the name of the Video DIV which is to contain the Big Video.
Are you saying that is the problem?
FYI, I changed that to the actual name of the Target DIV and no error now but nothing happening ether!

5

What is backticks (`)?
Thanks.

6

Exactly what is shown: `

Top left-hand key on many (but not all) keyboards.

1 Like
7

There are several ways of notating code on this forum.

Backticks

My favourite is to use three backticks followed by the language (css, html, javascript, and others) to start the code block, and end it with the same three backticks.

Here’s what you would type:

```javascript
var videoBox = document.querySelector(“#video_box”);
```

And here’s how it looks:

var videoBox = document.querySelector("#video_box");

</> button

Another way is to paste your code in the editor here, select that code and then press the preformatted text icon, that looks like </> in the toolbar. Although, with a single line that does something different, putting it in inline backticks instead.

var videoBox = document.querySelector("#video_box");

With multiple lines the </> button just puts three backticks before and after the code, which does a good job at guessing which language to use for the syntax colouring:

var videoBox = document.querySelector("#video_box");
videoBox.addEventListener("click", function() {

The website makes a best effort to guess when the coding language isn’t specified.

Indent

And yet a third way, is to just ensure that the code has at least four spaces of padding.

var videoBox = document.querySelector("#video_box");
videoBox.addEventListener("click", function() {

I prefer the first way, but those others mentioned above are other common ways that are available for marking up blocks of code.

1 Like
8

You don’t want to add an event listener to the name of the element but to the actual element; strings don’t have an addEventListener() method, hence the error.

video_box now indeed refers to the element with the ID video_box, but this is very bad practice and should be avoided for several reasons – better use getElementById() as I suggested above.

Anyway the entered URL now seems to appear in the box to the right…

9

So I did as you suggested. That is we are not getting the DIV via:

var target_div = document.getElementById(‘video_box’);

However, the addEventListener added to this DIV is not having any action upon Click on it!
As for example even the console.log(‘Clicked on Video’); inside it, for debugging purposes, is not getting activated.

So what to do to actually add this onclick addEventListener to this DIV?

10

it is getting added, just not immediately.

For the benefit of others participating here, the embed_video function which we are debugging, doesn’t get activated until after you’ve clicked on the green video icon, and click on Embed Video.

Once you’ve done that, the addEventListener part of the code is executed, and clicking on the embedded iframe causes “Clicked on video” to be logged to the browser console.

This demonstrates that the addEventListener part of the code is correctly being activated.

1 Like
11

What do you mean by:
“getting added, just not immediately.”

Upon clicking on Embed Video button the function:
embed_video
is called which embeds the Video iFrame into the DIV video_box
and adds addEventListener click to this DIV. So then upon clicking this DIV which has addEventListener added to it, then the inculuded function is to be executed, which among other things is to pop the Fixed DIV of video_display, none of which is happening!
So the addEventListener for action click is actually doing nothing!
Very strange :frowning:

12

BTW, just to make it crystal that the function by is not getting executed, I added:

alert(‘Hello World’);

to the start of this addEventListener function, and if you click on resulting DIV which is:
var target_div = document.getElementById(‘video_box’);
in the containing function, you see that the alert(‘Hello World’); is not firing.

An in case, here is a iframe Video for testing:

<iframe width="853" height="480" src="https://www.youtube.com/embed/5No9FzbTYLY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
13

OK, this is very interesting!
That is if we click on the borders of this DIV which has the click function added to it via:
addEventListener
then the content of this function does get executed! But not if you click on the rest of, entire of, that DIV! What the HeK! Why is addEventListener function effect is not applying to the entire space of the DIV which it is attached to and only applying to the borders?
It seems that the iFrame Video YouTubeb play effect is suppressing the effect of the function added via addEventListener!
Which brings me to a related question: how to suppress the iFrame/YouTube play effect in the lil DIV and only allow it in the Big (Fixed) DIV?

Thanks,

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.