How can I change the image source on click with JavaScript?

Question

I'm trying to figure out how I can change an image source when clicking on different buttons to show a picture of an animal. My JS code is in-between script tags in the head of my HTML doc. I pasted it below. I am using Safari.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome</title>
    <link rel="stylesheet" href="styles.css">

    <script>
    function change (){
     document.getElementById("pic").src="./images/lion.jpg";
    }
    </script>

  </head>
  <body>

  <header>
   <div class="container">
    <h1>Choose an Animal</h1>
    <hr>
   </div>
  </header>

  <section>
   <div class="container">
    <img src="./images/image.jpg" id="pic">
   </div>
  </section>

  <section id="animals">
   <div class="container">
     <button type="button" class="button1"     onclick="change">Lion</button>
     <button type="button" class="button1">Tiger</button>
     <button type="button" class="button1">Bear</button>
   </div>
  </section>



  </body>
</html>

What kind of errors are you seeing?

Eduard Malakhov
– Eduard Malakhov

2017-12-24 01:33:32 +00:00
Commented Dec 24, 2017 at 1:33 — Eduard Malakhov
– Eduard Malakhov, Commented Dec 24, 2017 at 1:33

4cody · Accepted Answer · 2017-12-24 09:00:11Z

2

What I might try to do would be to assign the id to the container div and have your CSS set up so that the background of the div is the image you want, similarly you can then change the CSS background prop with js.

 <section>
   <div class="container" id="pic">
     <!-- no img tag needed now -->
   </div>
 </section>

From here you can grab the div with js and have your click function perform the same task of changing the image but it will instead be doing this by changing the background-image property of the the div in CSS.

function myFunc () {
  document.getElementById('pic').style.backgroundImage = 
  'url(path/to/image.jpg)';
}

edited Dec 24, 2017 at 9:00

answered Dec 24, 2017 at 7:43

4cody

3541 silver badge20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Highdown · Accepted Answer · 2017-12-24 09:58:27Z

1

One simply option to get you started is to alter your JavaScript to something like:

function change(index) {
  var imageLookup = ["./images/lion.jpg", "./images/tiger.jpg", "./images/bear.jpg"];
  document.getElementById("pic").src = imageLookup[index];
}

If you put the list of images in an array, you can pass the change function an index from each of your buttons.

As shown, modify the button function for lion to be change(0), for tiger change(1), and for bear change(2). Lions, tigers, and bears, Oh My... You should see some switching if your paths to the images are correct.

Let me know if you are still struggling.

answered Dec 24, 2017 at 9:58

Highdown

6341 gold badge11 silver badges25 bronze badges

Comments

Progesh Subba · Accepted Answer · 2017-12-24 06:34:29Z

If you are using JQuery you can write code in more efficient way.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

  <header>
   <div class="container">
    <h1>Choose an Animal</h1>
    <hr>
   </div>
  </header>

  <section>
   <div class="container">
    <img src="images/lion.jpg" id="pic">
   </div>
  </section>

  <section id="animals">
   <div class="container">
     <button type="button" class="button1" data-img="lion.jpg">Lion</button>
     <button type="button" class="button1" data-img="tiger.jpg">Tiger</button>
     <button type="button" class="button1" data-img="bear.jpg">Bear</button>
   </div>
  </section>

   <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

  <script type="text/javascript">
    $(function(){
      $('.button1').on('click',function(){
        var image = $(this).data('img');
        $('.container #pic').attr('src','images/'+ image);
      });  
    })
  </script>

Collectives™ on Stack Overflow

How can I change the image source on click with JavaScript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related