change HTML image based on javascript value

Question

First like to say I upload those as I work on it at http://ali-hassan.info I have a table, when I click an item in the table it updates in an array for that cell, so when the page loads the cells variable is 0, when clicked it changes to 1, when that occurs I'd like for the image to change for that one cell, at the moment I have it as this in my javascript, there is a function that actually changes the cell's variable to 1.

function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("empty"))
  {
  element.src="1.gif";
  }
else
  {
  element.src="2.gif";
  }
}

And this is a sample of the HTML table

<td><div align="center">A</div></td>
   <td class='n' id='a1' onclick="myFunction(1,0)"><img id="myimage" onclick="changeImage(1)"  src="empty.gif"/></td>
   <td class='n' id='a2' onclick="myFunction(2,0)"><img id="myimage" onclick="changeImage(2)"  src="empty.gif"/></td>
   <td class='n' id='a3' onclick="myFunction(3,0)"><img id="myimage" onclick="changeImage(3)"  src="empty.gif"/></td>
   <td class='n' id='a4' onclick="myFunction(4,0)"><img id="myimage" onclick="changeImage(4)"  src="empty.gif"/></td>
   <td></td>

Yes, "when I click an item in the table it updates in an array for that cell, so when the page loads the cells variable is 0, when clicked it changes to 1, when that occurs I'd like for the image to change for that one cell" — user1872493
– user1872493, Commented Feb 21, 2013 at 17:07
I want to be able to treat each cell differently in that function — user1872493
– user1872493, Commented Feb 21, 2013 at 17:08

Dinoop paloli · Accepted Answer · 2013-02-21 17:22:57Z

1

 //modify ur js like this
 function changeImage(img)
 {
 //"img" is the image on which user clicked
 if (img.src.match("empty"))
   {
   img.src="1.gif";
   }
 else
   {
   img.src="2.gif";
   }
 }
//and html like this
  <td><div align="center">A</div></td>
  <td class='n' id='a1' onclick="myFunction(1,0)"><img id="myimage" onclick="changeImage(this)"  src="empty.gif"/></td>
  <td class='n' id='a2' onclick="myFunction(2,0)"><img id="myimage" onclick="changeImage(this)"  src="empty.gif"/></td>
  <td class='n' id='a3' onclick="myFunction(3,0)"><img id="myimage" onclick="changeImage(this)"  src="empty.gif"/></td>
  <td class='n' id='a4' onclick="myFunction(4,0)"><img id="myimage" onclick="changeImage(this)"  src="empty.gif"/></td>
  <td>
 </td>

You cannot use repeated Id as a selector in HTML, and it is a bad programming style

edited Feb 21, 2013 at 17:22

answered Feb 21, 2013 at 17:15

Dinoop paloli

6332 gold badges8 silver badges26 bronze badges

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

Comments

karaxuna · Accepted Answer · 2013-02-21 17:11:44Z

0

<img onclick="changeImage.call(this, 1)"

JS:

function changeImage(i)
{
    this.src= i + ".gif";
}

Note: your example needs some changes, I only show how it's done

answered Feb 21, 2013 at 17:11

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

Collectives™ on Stack Overflow

change HTML image based on javascript value

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