Change multiple element color on click on an expandable toggle menu

Question

I would need a Javascript function that allows me to change the color of some elements of the header of a website that I’m developing when I click on the drop-down menu in the top left. The site is made in Wordpress and using Elementor Pro. There are three elements that should change color: the central logo, the two buttons on the top right and the background of the entire header so that it is white as the background of the drop-down menu. The two buttons should become the following color, for text and border, #2E324D; while the logo should be dynamically replaced with its blue variant already loaded in the site’s media library (src: http:///prova.lamaielletta.it/wp-content/uploads/2023/10/Logo-Blu.png). The header background as anticipated white. I attach reference images for the final result. Here the link to the website page: https://prova.lamaielletta.it/

Closed menu Opened menu

Having no experience with Javascript I tried to write independently a first function that at least changed the background color of the header at the click of the drop-down menu button, making it white as the background of the menu itself. Below the written function, using a class selector to identify the menu button, to which I added a click function as a result of which the background color of the header had to change.

<script>
const menu = document.getElementByClassName('elementor-menu-toggle');

menu.addEventListener('click', function onClick(event) {
  const header = document.getElementByClassName('elementor-element elementor-element-a58d576 e-con-full e-flex e-con e-parent');

  header.style.backgroundColor = 'white';

});
</script>

To insert it into the body I used the WPCode plugin. But it didn’t work. I’m stuck at this point

Answer 1

document.getElementsByClassName(x) gives you all elements that have class x so in other words it returns a collection

so you should use it like this menu[0].addEventListener and if you want to do something for all elements (change style) you should use for-loop