callback still doesn't work

Question

I wrote post several hours ago, where I have several interesting answers, but I don't uderstand everything and now I can't use that post. So I create one new.

I sill have problem with callback in this code:

<div id='temp'></div>
<div id='points'></div> 
<div onClick ="play(1, 1)" id='click'>clickclickclick</div> 

<script>
play(function (addpoints) {
    document.getElementById('temp').innerHTML = addpoints;
}());

function play (choosecolor, randescolor) {
    if (choosecolor == randescolor) {
        if (document.getElementById('points').innerHTML === '') {
            document.getElementById('points').innerHTML=100;
        }
        else {
            var points = function (allpoints) {
                var addpoints = parseInt(allpoints) + 100;
                callback(addpoints);

                document.getElementById('points').innerHTML=addpoints;
            }
        }

        points(document.getElementById('points').innerHTML);
    }
}

I uderstand that function callback doesn't send var addpoint with its value to second function, so in second function addpoints is undefined. But I don't understand why addpoints lose its value (but I can show it in div), what callback do and how correct it. Some user gave me advise that I should to choosecolor(addpoints); instead of callback(addpoints); but it still not work.

Answer 1

After some thoughts and research. i came accross that i was wrong somewhere. Here is the solution , pass the last parameter - which is the name of the function you want to call back. Now this will work as you want it to work. Now here i mentioned the third parameter as name of the function i want to call after this function.

<div id='temp'></div>
<div id='points'></div> 
<div onClick ="play(1, 1, newcallback)" id='click'>clickclickclick</div> 

Here i declared a newcallback function which i will call after this method:

function newcallback(addpoints) {
    document.getElementById('temp').innerHTML = addpoints; //undefined
});

function play (choosecolor, randescolor,callback) {
    if (choosecolor == randescolor) {
        if (document.getElementById('points').innerHTML === '') {
            document.getElementById('points').innerHTML=100;
        }
        else {
            var points = function (allpoints) {
                var addpoints = parseInt(allpoints) + 100;
                callback(addpoints);

                document.getElementById('points').innerHTML=addpoints;
            }
        }

        points(document.getElementById('points').innerHTML);
    }
}

Here is the fiddle : JsFiddle