Though I've been gone for a while, I always find my way back, don't I (even if no one noticed)?
The Goal in Mind
All I really need are some images, grouped together with a main image.
This main image will always be visible and will also act as a link triggering an action upon clicking.
<a onclick="toggleHidden('ImageGroup1')"><img src="…"></a>When this image is clicked, the function toggleHidden will be activated. The following images in the group will ideally be hidden by default and only shown when the main image is clicked. Only the images after the main image should toggle between being displayed or hidden.
The Challenge
I want the title attribute of the image to be dynamic, meaning it needs to have a number calculated based on the date. This seemed achievable only through JavaScript, where I create an image using const imgName = new Image() and then add attributes and classes.
If I place these images within a <div> or <span> element, assign an id to it, and use element.getElementById in my function toggleHidden, the images still display. (By the way, I managed to make it work with "regular" images created using HTML code like <img src="">.)
In Practice
I attempted two functions. Firstly, all images in the same group share the same class (in this case ImageGroup1).
First function:
function showHiddenClassElements(myClassName) {
var hidimg = document.getElementsByClassName(myClassName);
if (hidimg.style.display === "none") {
hidimg.style.display = "block";
} else {
hidimg.style.display = "none";
}
}
I tried various iterations, including inversing the condition like !== "none" (and corresponding code adjustments) and using different attributes than initial or inline.
Second function:
function toggleHiddenClass(myClassName) {
var element = document.getElementsByClassName(myClassName);
element.classList.toggle("hiddenspan");
}
...where hiddenspan contains only display: none; - however, nothing seems to work.
My Implementation
<style>
.Group2 { }
.Group3 { }
.basic {
width:150px;
height:225px;
}
.hiddenspan {
display: none;
}
</style>
<script>
function myFunction(myDIVid) {
var x = document.getElementById(myDIVid);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function showHiddenClassElements(myClassName) {
var hidimg = document.getElementsByClassName(myClassName);
if (hidimg.style.display === "none") {
hidimg.style.display = "block";
} else {
hidimg.style.display = "none";
}
}
function toggleHiddenClass(myClassName) {
var element = document.getElementsByClassName(myClassName);
element.classList.toggle("hiddenspan");
}
</script>
<body>
<h2>Group 1</h2>
<a onclick="myFunction('Group1')"><img class="basic" src="01.gif" alt="01" title="01"></a>
<span id="Group1" class="hiddenspan">
<img class="basic" src="001.jpeg" alt="001" title="001">
<img class="basic" src="002.jpeg" alt="002" title="002">
<img class="basic" src="003.jpeg" alt="003" title="003">
</span>
<h2>Group 2</h2>
<a onclick="showHiddenClassElements('Group2')">
<img class="basic" src="02.gif" alt="02" title="02">
</a>
// Additional script content here...
</body>
It's clear that the code has been simplified, particularly the HTML part (no <h1> header, no HTML declaration), but the concept remains intact.
While the functionality works perfectly for Group 1 (almost, except for a line break after the main image which is manageable), the same approach with dynamically generated images using JavaScript (Group 4) results in displaying the images as if the <span> element with its assigned id and class were not present at all.
The other functions related to groups 2 and 3 do not seem to have any effect, as if getElementsByClassName is not functioning correctly. That's what I suspect.
What are your thoughts? Is there a method to toggle the display of these images effectively?
Update 1
Pursuant to Mike 'Pomax' Kamermans' suggestion, I included an event listener (hopefully correctly):
<script>
document.getElementById("idGroup3").addEventListener("click", toggleHiddenClass("Group3"));
</script>
...and modified the code for Group 3 accordingly (as recommended):
<h2>Group 3</h2>
<button id="idGroup3">
<img class="basic" src="03.gif" alt="03" title="03">
</button>
// Additional script content here...
</body>
Despite these updates, there appears to be no change in behavior.