0

i want to place an image inside the cell on the first click and another image on the second click at the same position. In order to do that i tried writing onclick function in the tag..but as its written within functions it wont work..is there any other way to achieve the need ? plz help?

JS for placing the images on click:-

function changeColor1(elem)
{ 
     elem.innerHTML = '<img src="images/atom1.png" width="20px" height="20px" onclick=changecolor2(this) />';   
    //alert("Row Index is:"+elem.parentNode.rowIndex+elem.cellIndex);
    var x= elem.cellIndex;
    var y= elem.parentNode.rowIndex;
    click_count(x,y);
 }
 function changeColor2(elem)
{ 
     elem.innerHTML = '<img src="images/2circles.png" width="20px" height="20px" onclick=changecolor3(this) />';    
    //alert("Row Index is:"+elem.parentNode.rowIndex+elem.cellIndex);
    var x= elem.cellIndex;
    var y= elem.parentNode.rowIndex;
    click_count(x,y);
 }

code for making the grid:

$rows = 7; // define number of rows
$cols = 6;// define number of columns
echo "<center>";
echo "<table border='1'   cellspacing=0 cellpadding='35' pixels'>";

for($tr=0;$tr<$rows;$tr++){

    echo "<tr>";
        for($td=0;$td<$cols;$td++){
               echo "<td onclick=\"changeColor1(this)\" >&nbsp &nbsp</td>";
        }
    echo "</tr>";
2
  • Hi, try to use toggle function of jquery. Jan 21, 2014 at 12:59
  • i need to identify 4 mouse clicks at the same position with different functions..is there a way for that ?
    – jasmin
    Jan 21, 2014 at 13:32

1 Answer 1

1

Try this:

function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function changeColor2(elem)
{ 
 if(!hasClass(elem, 'clicked')){
  //clicked first time 
   elem.className = elem.className + " clicked";//add clicked class to element on first click
   elem.innerHTML = '<img src="images/2circles.png" width="20px" height="20px"    onclick=changecolor3(this) />';    
  //alert("Row Index is:"+elem.parentNode.rowIndex+elem.cellIndex);
  var x= elem.cellIndex;
  var y= elem.parentNode.rowIndex;
  click_count(x,y);}
else{
    //clicked second time and onward
  }
}
6
  • can u please explain hasClass functionality..?
    – jasmin
    Jan 21, 2014 at 13:17
  • Hasclass function checks whether element(passed as parameter element) contains the class(passed as parameter cls) Jan 21, 2014 at 13:18
  • where am i suppose it add the hasClass function call...am i supposed it write it while calling the 1st time..i.e. in the <td> tag? for eg:- <td onclick=\"changeColor1(this)\" >&nbsp &nbsp</td>"; instead of writing this am i supposed to write <td onclick=\" hasClass(this)\" >&nbsp &nbsp</td>";
    – jasmin
    Jan 21, 2014 at 13:25
  • I have added the code in changeColor2 which will add class clicked on first click. the else part in the function is second and afterword clicks. Jan 21, 2014 at 13:37
  • how can i add my 3rd and 4th click functionality ? i am not able to change images on my 3rd and 4th click with jst writing else..so wat condition can i use ?
    – jasmin
    Jan 21, 2014 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.