Looking for help with making an image appear when clicking on one of three images? Despite trying different approaches, the desired result is still not achieved. I'm aware of using if else statements but exploring other methods. Any insights on what might be missing or incorrect would be greatly appreciated.
var figElement = document.getElementById("placeholder");
var imgSource = document.getElementById("image");
var figCap = document.querySelector("figcaption");
//display first picture
function pic1() {
imgSource.src = "images/trunk-bay.jpg";
imgSource.alt = "Elevated view of Trunk Bay beach on St. John";
figElement.style.display = "block";
figCap.textContent = "Trunk Bay in St. John";
}
//display second picture
function pic2() {
imgSource.src = "images/sanjuan.jpg";
imgSource.alt = "Elevated view of Elevated view of San Juan coast";
figElement.style.display = "block";
figCap.textContent = "Coast of San Juan";
}
//display third picture
function pic3() {
imgSource.src = "images/curacao.jpg";
imgSource.alt = "The blue waters of Curacao";
figElement.style.display = "block";
figCap.textContent = "Curacao";
}<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8>
<link rel='stylesheet' href="css/styles.css">
</head>
<script src="scripts/script.js"></script>
<body>
<div id="container">
<header>
<h1>Visit the Caribbean</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Places</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<p>Discover the beauty of the Caribbean with its stunning islands and picturesque beaches. Click on the images below to see more.</p>
<figure>
<img src="images/trunk-bay-thumb.jpg" alt="Elevated view of Trunk Bay beach on St. John" onclick='pic1()'>
<img src="images/sanjuan-thumb.jpg" alt="Elevated view of San Juan coast" onclick='pic2()'>
<img src="images/curacao-thumb.jpg" alt="The blue waters of Curacao" onclick='pic3()'>
</figure>
<figure id="placeholder">
<img src="image" alt="placeholder" id="image">
<figcaption></figcaption>
</figure>
</main>
<footer>
</footer>
</div>
</body>
</html>