const imageOne = document.getElementById('imageOne');
const modalImage = document.getElementById("img01");
let altText = document.getElementById("caption");
imageOne.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
#imageOne {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
<img id="imageOne" src="imageone.jpg" alt="Image one" >
<br>
<br>
<img id="imageTwo" src="imagetwo.jpg" alt="Image two" >
The above code snippet is from a CSS3 tutorial on modal images. It's crucial to note that having multiple tags with the same ID is not recommended, and the solution involves using dynamic IDs in JavaScript.
const imageOne = document.getElementById('imageOne');
I'm trying to figure out how to dynamically change getElementById so I can utilize more than one image with different sources. Research suggests that using a Tag selector or Class selector isn't the appropriate approach.
If anyone has any resources or documentation to help me improve my understanding, I would greatly appreciate it.
I've made good progress with the CSS styling, and everything looks fantastic. My next goal is to display text when the modal pops up utilizing existing alt attributes. Here's the current JavaScript line I have:
let altText = document.getElementById("caption");
Below is the HTML structure I plan on using to showcase unique alt text for each image inside the modal popup:
I've attempted to implement this but it doesn't seem to be working. Could the issue lie in my CSS formatting?