Using JavaScript function to open img onclick

Question

So I'm trying to make another image appear after clicking on any of the three images, but for some reason the image doesn't appear if I click on any image. If possible, can someone please explain what I'm missing or doing wrong. I know I can use an if else statement but I'm trying to use a different approach.

         var figElement = document.getElementById("placeholder");  
    var imgSource = document.getElementById("image");  
    var figCap = document.querySelector("figcaption");
    
    //function to display the 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";
    }
    
    //function to display the 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";
    }
    
    //function to display the 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>The Caribbean boasts several island hotspots for your perfect getaway! Enjoy crystal clear waters, sandy white beaches, and never-ending sun. Click the pictures below for a larger view.</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>

Your code above seems to run fine. So you have any errors in your developer console? — epascarello, Apr 05 '22 at 16:30
Please [edit] your question to include what is happening that you are not expecting, or what is not happening that you are expecting. Take the [tour] and read [ask] for more information on what most good answerers are looking for from questions. — Heretic Monkey, Apr 05 '22 at 16:37

score 0 · Answer 1 · answered Apr 05 '22 at 16:22

it'seem that your code runing well, try just to set your javascript script declaration tag in the end of your html body element, and checks that your images sources are in well place :

var figElement = document.getElementById("placeholder");  
    var imgSource = document.getElementById("image");  
    var figCap = document.querySelector("figcaption");
    
    //function to display the first picture
    function pic1() {
        imgSource.src = "https://picsum.photos/50/50";
        imgSource.alt = "Elevated view of Trunk Bay beach on St. John";
        figElement.style.display = "block"; 
        figCap.textContent = "Trunk Bay in St. John";
    }
    
    //function to display the second picture
    function pic2() {
        imgSource.src = "https://picsum.photos/75/75";
        imgSource.alt = "Elevated view of Elevated view of San Juan coast";
        figElement.style.display = "block";
        figCap.textContent = "Coast of San Juan";
    }
    
    //function to display the third picture
    function pic3() {
        imgSource.src = "https://picsum.photos/100/100";
        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>
<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>The Caribbean boasts several island hotspots for your perfect getaway! Enjoy crystal clear waters, sandy white beaches, and never-ending sun. Click the pictures below for a larger view.</p>

            <figure>

                <img src="https://picsum.photos/50/50" alt="Elevated view of Trunk Bay beach on St. John" onclick='pic1()'>
                <img src="https://picsum.photos/75/75" alt="Elevated view of San Juan coast" onclick='pic2()'>
                <img src="https://picsum.photos/100/100" 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>
    
<script src="scripts/script.js"></script>
</body>
</html>

pdzxc · Answer 2 · 2022-04-05T16:35:30.673

It seems that you are getting null values for figElement, imgSource and figCap hence you are getting an error Cannot set properties of null.

Those elements that you were trying to find weren't in the DOM when your script ran. See Why does jQuery or a DOM method such as getElementById not find the element?

You can solve the problem by moving your import before the end of body tag </body>

You may want to simplify your code by using a class (fig-img in my example) for each image and add click listener on it. This will make your code more flexible if you want to add more images and you don't have to create a function on every image click. See sample code below:

HTML

<figure>
  <img
    src="images/trunk-bay-thumb.jpg"
    alt="Elevated view of Trunk Bay beach on St. John"
    class="fig-img"
  />
  <img
    src="images/sanjuan-thumb.jpg"
    alt="Elevated view of San Juan coast"
    class="fig-img"
  />
  <img
    src="images/curacao-thumb.jpg"
    alt="The blue waters of Curacao"
    class="fig-img"
  />
</figure>

<figure id="placeholder">
  <img src="image" alt="placeholder" id="image" />
  <figcaption></figcaption>
</figure>

JS

var figElement = document.getElementById("placeholder");
var imgSource = document.getElementById("image");
var figCap = document.querySelector("figcaption");
var figImages = document.querySelectorAll(".fig-img");

figImages.forEach((f) => {
  f.addEventListener("click", ({ target: { src, alt } }) => {
    imgSource.src = src;
    imgSource.alt = alt;
    figElement.style.display = "block";
    figCap.textContent = alt;
  });
});

Using JavaScript function to open img onclick

2 Answers2