<head>
<style> .videovideo { border-style: solid; height: 300px; width: 300px; } .videoChild { height: 300px; width: 300px; display: none; } </style> </head>
<body> <div id="video1" class="videovideo"> <div class="videoChild" style="background-color: red"></div> <div class="videoChild" style="background-color: green"></div> <div class="videoChild" style="background-color: blue"></div> <div class="videoChild" style="background-color: yellow"></div> <div class="videoChild" style="background-color: purple"></div> </div> <div id="video2" class="videovideo"> <div class="videoChild" style="background-color: red"></div> <div class="videoChild" style="background-color: green"></div> <div class="videoChild" style="background-color: blue"></div> <div class="videoChild" style="background-color: yellow"></div> <div class="videoChild" style="background-color: purple"></div> </div>
<script> let imageContainers = document.querySelectorAll('.videovideo');
//function to be attached to click eventListener below
function setNextImageVisible(event) {
const target = event.currentTarget; //currentTarget gets element with eventListener not just one Clicked
const children = Array.from(target.children);
if (target.indexOfDisplaying >= children.length - 1) {
target.indexOfDisplaying = 0;
} else {
target.indexOfDisplaying += 1;
}
children.forEach((child) => (child.style.display = 'none'));
children[target.indexOfDisplaying].style.display = 'block';
}
imageContainers.forEach((element) => {
element.indexOfDisplaying = 0;
element.children[0].style.display = 'block';
element.addEventListener('click', setNextImageVisible);
});
</script> </body>
If I understood what you are trying to do, this is what I came up with. Hope it helps!