Change the value of a specific div's class

February 15, 2022

I have the code below and I need to change "bg-image-container" from <div title="THISTEASER" to "bg-image-container-big"

<div id="teaser_id" class="column class1 class2 class3 class4">
  <div class="teaser-class-xy">
    <a class="class6 class7 class8 class9" href="test" title="test">
      <div title="THISTEASER" class="bg-image-container is-displayed-mobile lazyload" data-bg="1400x1200.jpg"></div>
      <div title="THISTEASER" class="bg-image-container is-displayed-tablet lazyload" data-bg="1400x1200.jpg"></div>
      <div title="THISTEASER" class="bg-image-container is-displayed-desktop lazyload" data-bg="1400x1200.jpg"></div>
    </a>

With

window.onload=function(){
    document.getElementById("teaser_id").classList.add('bg-image-container-big');
    }

I was able to change the ID but it didn’t help me.

I cant use jquery nor I can’t add an ID in HTML (otherwise i could change the class by myself). I don’t need a button solution, the javascript has to be with window.onload automaticaly

The classes aren’t unique also.

Hope you can help, thank you!

>Solution :

You could do it this way :

const elems = document.querySelectorAll('div[title="THISTEASER"]');
elems.forEach((e) => {
 e.classList.remove("bg-image-container")
  e.classList.add("bg-image-container-big")
});