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!
In this case you can make this:
window.onload=function(){
const divElements = document.querySelectorAll('div.bg-image-container');
divElements.forEach((div) => {
div.classList.remove("bg-image-container")
div.classList.add("bg-image-container-big")
});
}
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")
});
You can get all title and add a loop.
const elems = document.querySelectorAll('[title="THISTEASER"]');
elems.forEach((e) => {
e.classList.remove("bg-image-container"));
e.classList.add("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>
</div>
</div>