My onclick does not work right the way it should be

Question

I have this function

<?php
for($i = 1; $i <=9; $i++){
print("<div id='cover'>");
for ( $j = 1; $j <= 9; $j++){
    if($i % $j == 8 || $i < $j || $i == $j){
        print("<div class='colors' onClick='hello($i, $j)'>");
    } else {
        print("<div class='pinks' onClick='hello($i, $j)'>");
    }
    print($i ."+". $j ." ");
    print("</div>");
}
print("</div>");

}
?>

Which produces a bunch of div with numbers on it. I want to be able to click on it, and show the result of adding two numbers. I have this JavaScript function for that

function hello(r, t)
{
     $("div.colors, div.pinks").html(r+t);
}

but I do not know how to get only the one div i click on. How can I do that?

Answer 1

Assuming you only want to calculate the element on which the user has clicked, then the method should be more like this:

function calc(element, r, t)
{
    element.innerHTML = r+t
}

while the method call ofc would be:

<div><a href="#" onclick="calc(this,3,2);">3+2</a></div>

See this fiddle for example.

http://jsfiddle.net/m9wkr0vz/

---

To allow more complex calculations without providing methods for every combination, you could use javascripts ability to evaluate expressions given:

function calc(element)
{
    element.innerHTML = eval(element.innerHTML);
}

with

<div><a href="#" onclick="calc(this);">(7+1)/(2+2)</a></div>

see this fiddle: http://jsfiddle.net/u20bgx83/