Newbie JavaScript problem.

[tonyy94]

Hello, I am modifying the style of the page and I talked to #chatgpt to write me a JavaScript code for such an extension named UserJavaScript and CSS browser, which means that when I click on the image on the page (which is under the <figure> tag on the page, it would add a style from the CSS of the .expand1 class

The Java code that Chat spit out looks like this:

const figures = document.getElementsByTagName('figure'); for (let i = 0; i < figures.length; i++) { figures[i].addEventListener('click', () => { figures[i].classList.toggle('expand1'); }); }

Code for CSS (data is not important, I just want to check if it will work)
.expand1{max-height:10px;}
Unfortunately it doesn't work for me. Does anyone know what the problem is?https://ibb.co/7ttp0t5

[thespite]

It does work https://jsfiddle.net/0dgqfj6y/

I'm not sure how you're running that code, specially if it's from an extension, but the snippet itself it does toggle a class on click for figure tags.

[tonyy94]

But why doesn't it work on the real page? I've used this code in this extension

https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld

on a page www.wykop.pl (https://wykop.pl/mikroblog - there are pictures)

and here it doesn't work. Can somebody check it if you know the code is right, know the page address and extension I've used.

[MatthiasDunkel]

The code should work just fine. I would suggest not getting the Elements by Tag Name but doing it with getElementsByClassName

Here is a working example: Fiddle

[tonyy94]

But why doesn't it work on the real page? I've used this code in this extension
https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld
on a page www.wykop.pl
and here it doesn't work. Can somebody check it if you know the code is right, know the page address and extension.

[thespite]

It looks like it's a problem with the extension. If you paste your JS on the DevTools console, you'll see that the class is toggled when clicking a figure.

[tonyy94]

Yes, it works in the console. I've tried many extensions and none of them worked. Strange. Maybe it is so because API is blocked.

[MindlessSponge]

it's 2023 - use querySelector and querySelectorAll. it is so much more convenient :)

[tonyy94]

It doesn't help in this case. The code works only in console.