Javascript change image source

Question

I have an image inside a table cell which is also a clickable link with the following markup:

<a class="modalInput" rel="#flagsSummary" style="cursor:pointer">
    <img src="/FatcaOne_0/static/images/circleRed.png" width="20" height="20">
</a>

I am confused about the syntax of Javascript that I need to use just to change the source of the image or the image itself and leave the element and its attributes untouched. I tried this but that changes the link also which I don't want:

rows[lastRowClicked].cells[0].innerHTML = '<a class="modalInput" rel="#flagsSummary" style="cursor:pointer"><img src="/FatcaOne_0/static/images/circleYellow.png" width="20" height="20"></a>';

I only wish to change the image in the last row that was clicked.

pomeh · Accepted Answer · 2014-08-27 14:06:34Z

3

Try something like this:

var cell = rows[lastRowClicked].cells[0];
var allImagesInCell = cell.getElementsByTagName('img');
var theImage = allImagesInCell[0];

theImage.setAttribute('src', '/some/new/value');

You can also use theImage = cell.querySelector('img') if you don't need to support IE8 and below (see here https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector#Browser_Compatibility).

answered Aug 27, 2014 at 14:06

pomeh

4,9424 gold badges26 silver badges44 bronze badges

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

Comments

Bas Slagter · Accepted Answer · 2014-08-27 14:05:40Z

3

You can search for the image element within the table cell and just change the .src property.

var cell = rows[lastRowClicked].cells[0];
cell.querySelector('img').src = 'some/other/image.jpg';

answered Aug 27, 2014 at 14:05

Bas Slagter

9,9479 gold badges50 silver badges81 bronze badges

Collectives™ on Stack Overflow

Javascript change image source

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related