-1

I have a simple table of 3*3 cells. Each cell has a color of it own, first cell has Id="A1" and second cell has Id="A2". both of them are have the event onclick set to "DoSome(this)";

Why my code doesn't change to color of the must upper left cells? If I first click on A1 cell and then A2 cell both of them become red. I desire them to change colors, as if they were changing places.

My javascript:

var counter = 0;
var first;
var second;

function DoSome(obj) {
  counter++;

  if (counter % 2 == 0) {
    second = obj;
    var temp = second.style;
    second.style.backgroundColor = first.style.backgroundColor;
    first.style = temp;
  } else {
    first = obj;
  }

}
5
  • 1
    Can you show the HTML as well please.
    – putvande
    Apr 30, 2014 at 15:24
  • question is not clear. Apr 30, 2014 at 15:29
  • you haven't described completely that what you want ... give all your code or make a fiddle of your code
    – anni
    Apr 30, 2014 at 15:31
  • @anni Only use the code tag for posting code Apr 30, 2014 at 15:32
  • hi! may be i got your problem... just remove counter from your javascript... i can be completely sure if you give your all code
    – anni
    Apr 30, 2014 at 15:35

1 Answer 1

1

I think this is probably the sort of thing you're after although as the others said, it's a bit difficult without the full picture. This initialises things with the first cell being red and everything else blue and then swaps colours on click, I've assumed you're not using jQuery...

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <table style="width:100px; height:100px;">
        <tr>
            <td id="A1" onclick="javascript: DoSome(this);" style="background-color: red;"></td>
            <td onclick="javascript: DoSome(this);" style="background-color: blue;"></td>
            <td onclick="javascript: DoSome(this);" style="background-color: blue;"></td>
        </tr>
        <tr>
            <td onclick="javascript: DoSome(this);" style="background-color: blue;"></td>
            <td onclick="javascript: DoSome(this);" style="background-color: blue;"></td>
            <td onclick="javascript: DoSome(this);" style="background-color: blue;"></td>
        </tr>
        <tr>
            <td onclick="javascript: DoSome(this);" style="background-color: blue;"></td>
            <td onclick="javascript: DoSome(this);" style="background-color: blue;"></td>
            <td onclick="javascript: DoSome(this);" style="background-color: blue;"></td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    var prev = document.getElementById('A1');

    function DoSome(obj) {
        if (prev != obj) {
            var objCol = obj.style.backgroundColor;
            obj.style.backgroundColor = prev.style.backgroundColor;
            prev.style.backgroundColor = objCol;
        }
        prev = obj;
    }
</script>

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.