Changing the src of an image with javascript

Question

I have been trying to use the following piece of code to change the src of an image

document.getElementById('test').src='images/test2.png';

My code looks like this. There's some CSS and other things in there but the important parts are the div and the img, and the function.

<div id='splashScreen' class='splash'>
  <button class='bigButton' onclick='introSplash()'>Hi</button>
  <img class='splashImages' src='images/splashScreen1.png'>
</div>

this is my image with a page-sized transparent button over the top of it

<script>
function introSplash() {
    document.getElementById('splashImages').src='images/splashScreen2.png';
  }
</script>

this function should be replacing the image under the button.

Pressing the button with this code returns the following error message:

Uncaught TypeError: Cannot set property 'src' of null at introSplash

all of the images are locally saved and exist with those names

I'm not sure why this is occurring, and would appreciate any help.

I see you are new... I would strongly recommend you to use JQuery to do this kind of things... bye! — Ari Waisberg
– Ari Waisberg, Commented Dec 30, 2018 at 1:03

Jack Bashford · Accepted Answer · 2018-12-30 00:55:20Z

1

You need to add the ID test to the <img> element:

<img id='test' class='splashImages' src='images/splashScreen1.png' />

Now your code will work.

The alternative, without adding any IDs, would be to use document.getElementsByClassName like so:

document.getElementsByClassName('splashImages')[0].src='images/test2.png';

answered Dec 30, 2018 at 0:55

Jack Bashford

44.3k11 gold badges56 silver badges84 bronze badges

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

Comments

Manuel Eduardo Romero · Accepted Answer · 2018-12-30 00:57:30Z

1

Please verify you are using document.getElementById('splashImages') but the html element has not ID. Add the id attribute

<img id="splashImages" class='splashImages' src='images/splashScreen1.png'>

Please try this and let me know how it works :)

answered Dec 30, 2018 at 0:57

Manuel Eduardo Romero

8899 silver badges10 bronze badges

Comments

Tyr · Accepted Answer · 2018-12-30 00:54:46Z

0

You try to get the element by id, but only a class="splashImages" is given.

answered Dec 30, 2018 at 0:54

Tyr

2,7561 gold badge15 silver badges21 bronze badges

Comments

Laurens Deprost · Accepted Answer · 2018-12-30 00:55:07Z

0

document.getElementById('splashImages') returns null because the element you want does not have the correct id. Use getElementsByClassName instead, or give it the correct id.

So you should implement one of following changes:

<script>
function introSplash() {
    document.getElementsByClassName('splashImages').src='images/splashScreen2.png';
  }
</script>

or

<div id='splashScreen' class='splash'>
  <button class='bigButton' onclick='introSplash()'>Hi</button>
  <img id='splashImages' class='splashImages' src='images/splashScreen1.png'>
</div>

answered Dec 30, 2018 at 0:55

Laurens Deprost

1,7017 silver badges16 bronze badges

3 Comments

FascismSalad Over a year ago

Oh my gosh I feel silly now. Of course it wouldn't work it was a class not an ID. So sorry for wasting all of your time lol.

Laurens Deprost Over a year ago

We've all been there :)

Manuel Eduardo Romero Over a year ago

Yes... Everyone ve all been there expending time un a simple comma. Semicolon or id. :)

Collectives™ on Stack Overflow

Changing the src of an image with javascript

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related