Javascript HTML image source not changing

Question

So I am trying to change the source of my HTML image element. I used document.getElementId('image') to change it but my code is not working and I get no errors. If i erase that line of code the sign variable works and the sign shows up in my site.

HTML CODE:

    <img src="images/zodiac.jpg" alt="Chinese Zodiac">

Javascript CODE:

    document.getElementById("images/zodiac.jpg").src = image;

document.getElementById("images/zodiac.jpg").src = image; here u made mistake .. — Anant Dabhi
– Anant Dabhi, Commented Sep 12, 2014 at 4:28

Yooz · Accepted Answer · 2014-09-12 04:25:53Z

2

Add an id to the image :

<img id="zodiac" src="images/zodiac.jpg" alt="Chinese Zodiac">

Replace

document.getElementById("images/zodiac.jpg").src = image;

by

document.getElementById("zodiac").src = image;

answered Sep 12, 2014 at 4:25

Yooz

2,51823 silver badges31 bronze badges

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

1 Comment

EsotericRider Over a year ago

YOU THE MAN! worked like a charm. Its weird cause everything looked up online said nothing about img id.

Vivin Bangera · Accepted Answer · 2014-09-12 04:31:54Z

0

your method of using the document.getElementById() is wrong. you are supposed to pass the ID of the img tag and you are passing the value of the src. Instead of this, give an ID to the img tag

<img src="images/zodiac.jpg" id="zodiac" alt="Chinese Zodiac">

and in javascript:

document.getElementById('zodiac');

So your final syntax should be

document.getElementById("zodiac").src = image;

getElementById will get you the reference of the img object and from that it will pick the src property and assign the image variable to it.

Hope this helps!

answered Sep 12, 2014 at 4:31

Vivin Bangera

1667 bronze badges

Comments

HARDY8118 · Accepted Answer · 2018-09-20 19:07:13Z

0

Looks like you are trying to access an element by its id without giving it an id. Consider giving it an id or some sort of uniqueness. It can be done by giving it

an id

<img id="zodiac" src="images/zodiac.jpg" alt="Chinese Zodiac">

Then

document.getElementById("images/zodiac.jpg").src = image;

a name

<img name="zodiac" src="images/zodiac.jpg" alt="Chinese Zodiac">

Then

document.getElementsByName("zodiac").src = image;

a class

<img class="zodiac" src="images/zodiac.jpg" alt="Chinese Zodiac">

Then

document.getElementByClassName("zodiac").src = image;

Hope it helps

answered Sep 20, 2018 at 19:07

HARDY8118

7227 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript HTML image source not changing

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related