addEventListener not working

[austere wolf]

I have the following code:

<div class="container">
    <div class="photo-container">
      <div class="photo-section" id="pht1" data-text="" style="cursor: pointer;"> <img src="">
      </div>
    </div>
    <div class="s-container" id="phtdiv">test</div>
  </div>

document.addEventListener("DOMContentLoaded", () => {

  console.log("DOM LOADED");

   const photo1 = document.getElementById("pht1");
  photo1.addEventListener("click", () => {
    console.log("clicked");
  }); 
});

DOM LOADED is showing in the web console but when I click the div its not logging anything

[lament violet]

The only content inside the div is an empty image. Unless you have CSS specifying size dimensions for this div, it has 0 height and 0 width. That makes it impossible to click on. I don't know what you tried to click to get an output, but it wasn't the div that the event listener is on.

[austere wolf]

.photo-container {
  padding-top: 10px;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  width: 30%;
}

.photo-section {
  position: relative;
  width: 50%;
  height: 150px;
  margin-bottom: 15px;
  border: 1px solid black;
  overflow: hidden;
}

it has width and height declared

[lament violet]

I did a copy and paste of your code and it works when I include the CSS.

[austere wolf]

huh

[lament violet]

https://codepen.io/chooking/pen/mdopGNV?editors=1111

This works with your exact code. I did not make any changes.

But it was impossible without the CSS for the reason I explained above.

[austere wolf]

nah for me it doesnt work on codepen as well

[lament violet]

I just double checked on both Chrome and Firefox and it works on both. Which browser are you using? Can you try with extensions turned off?

[lament violet]

Did you check the codepen console? It's not the same as the browser's console.

[austere wolf]

Yes, I did, I use Google and the only extension I've got is adblocker

[lament violet]

What kind of pointing device do you use? Is it a mouse, trackball, etc?

[austere wolf]

Mouse

[lament violet]

Apple?

[austere wolf]

DELL

[lament violet]

Did you click in the box or on the word "test"?

[austere wolf]

Box, im not stupid 🙂

[lament violet]

I had to be sure, because this is a strange problem.

[austere wolf]

I feel you

Don't know what the problem would be

[lament violet]

I just made a slight change to the code. Can you try the codepen again to see if it works?

[austere wolf]

yep, it works now

[lament violet]

It should not output DOM Content loaded

[lament violet]

Interesting.

[austere wolf]

When the box is clicked it outputs clicked

[lament violet]

I removed waiting for the domcontent to load.

But I am not aware of any reason why that should have been a problem.

[austere wolf]

still in browser mode doesnt work

[lament violet]

What does that mean?

[austere wolf]

I meant that when I open the html page and click on the image, it doesnt log anything in the browser console, I also tried adding some text in the div with the phtdiv id and still doesnt do anything

[lament violet]

If you removed the dom content load listener, you must either place the script at the end of the body or use the defer attribute.

[austere wolf]

I didn't remove it

[lament violet]

I got my version working by removing it. Maybe you thought I meant I removed the message about the content loading. I removed the listener itself but kept the other listener that was inside of it.

[austere wolf]

ok let me try adding defer

It's strange because I have more code in the index.js file that works for the other html pages, only for this one it's more complicated

same listeners, same methods

[lament violet]

This is the entire revised js that I used:

const photo1 = document.getElementById("pht1");
  photo1.addEventListener("click", () => {
    console.log("clicked");
  }); 

[lament violet]

Do you listen for domcontentloaded more than once in your page?

[austere wolf]

What do you mean by that

[lament violet]

Does this appear more than once in the same JS file?

document.addEventListener('DOMContentLoaded', function () {
//other code
}

[austere wolf]

no

[lament violet]

Did you try removing it while keeping the code inside of it?

[austere wolf]

Yes, still doesn't work

[lament violet]

Can you show your JS?

[austere wolf]

its 400 lines of code

can I DM it?

[lament violet]

In that case, it's more than I am willing to evaluate.

[austere wolf]

50 lines are variables, 250 lines are event listeners

:p

[lament violet]

I am not sure if looking at any of that code would help. The codepen only worked after removing the domcontentloaded event listener. I have never seen a problem before that required removing it and it worked fine on my computer with both Firefox and Chrome but it didn't work for you. There is something else wrong besides the JS.

[austere wolf]

well, probably

[lament violet]

Check to see if the browser has any updates available.

chrome://settings/help

[austere wolf]

Does this has anything to deal with it?

[lament violet]

That is definitely a problem. What is on line 70 of index.js?

[austere wolf]

no arguments used in ()

did not need any

[lament violet]

Where is the code that defines a variable named abisiana?

[austere wolf]

line 27

[lament violet]

Check your html to see if you have an element with that exact id. Check both spelling and capitalization and double check that it is an id and not a class.

[lament violet]

Add a new line between 27 and 28 to output a console log of abisiniana. The goal is to verify that it is not null.

[austere wolf]

wait you gave me an idea

[lament violet]

Try the same console log on line 69 to see if it is null right before the attempt to add an event listener.

[austere wolf]

yeah just did that rn, its null

[lament violet]

That means the value is being changed. Do you happen to have a totally different variable with the same name?

[austere wolf]

nope, just verified with ctrl f, but I will change the names anyways

Changed the name, still null

[lament violet]

Something is changing it. You have to find out how it is changing. I can't stay to help any further. I will be back in about 5 hours.

[austere wolf]

It's fine, thanks for the help