I know there are other questions like this and I've tried following them I'm just not aware of what exactly I'm doing wrong. I've declared the pic variable as being linked to the image with the corresponding id of 'pic' and I've tried many different examples and trying to follow other questions like this but to no avail.

--- THE REAL QUESTION ----

I would like the image to change its src to another one that I have in my workspace with the click of a button.

HTML:

<img class="trans" id="pic" src="images/link_rouge.png" alt="" width="1000" height="333" /> 

JavaScript:

var pic = document.getElementById('pic');

function rouge() {
    pic.src = "images/link_rouge.png";
}

function blue() {
    pic.src = "images/link_blue.png";
}

I know the functions already work with the buttons because they are affecting some divs on the page that change color the only things not changing are the images.

I know there are other questions like this and I've tried following them I'm just not aware of what exactly I'm doing wrong. I've declared the pic variable as being linked to the image with the corresponding id of 'pic' and I've tried many different examples and trying to follow other questions like this but to no avail.

--- THE REAL QUESTION ----

I would like the image to change its src to another one that I have in my workspace with the click of a button.

HTML:

<img class="trans" id="pic" src="images/link_rouge.png" alt="" width="1000" height="333" /> 

JavaScript:

var pic = document.getElementById('pic');

function rouge() {
    pic.src = "images/link_rouge.png";
}

function blue() {
    pic.src = "images/link_blue.png";
}

I know the functions already work with the buttons because they are affecting some divs on the page that change color the only things not changing are the images.

• javascript
• html

Share Follow edited Jun 23, 2018 at 11:51 YakovL 8,3851313 gold badges7373 silver badges113113 bronze badges asked Feb 26, 2016 at 4:29 cosmichero2025cosmichero2025 1,03944 gold badges1616 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.

Use addEventListener over button elements to attach click events and bind your handler functions to those events.

var pic = document.getElementById('pic');

function rouge() {
  pic.src = "http://www.projectvictorycosplay./images/zelda/Links/3198_render_link.png";
}

function blue() {
  pic.src = "http://bin.smwcentral/u/1944/Link%2BBlue%2BTP%2Bshrunk.png";
}
document.getElementById('btn1').addEventListener('click', rouge);
document.getElementById('btn2').addEventListener('click', blue);

img {
  width: 200px;
}

<button id='btn1'>rouge</button>
<button id='btn2'>blue</button>
<br/>
<img class="trans" id="pic" src="http://www.projectvictorycosplay./images/zelda/Links/3198_render_link.png" alt="" width="1000" height="333" />

There's a chance your page has not loaded before pic is set equal to document.getElementById('pic');.

You can use something like jQuery's $(document).ready() function (or document.addEventListener("DOMContentLoaded", handler);) to ensure your page is fully loaded before assigning the pic variable.

$( document ).ready(function() {
    var pic = document.getElementById('pic');

    function rouge() {
        pic.src = "images/link_rouge.png";
    }

    function blue() {
        pic.src = "images/link_blue.png";
    } 
});

Note: You will need to pull the JQuery library into your project to use this method. See here.

Also, you can read this post to learn a little more about HTML/JavaScript and page loading.