Onclick event in a function not able to call nested function

Question

I have a function which has another function in it. There is an onclick event in main function and I want it to call the inner function. However when I click the element, it says that the function is not defined. The onclick event is in a for loop. Here is the code:

function renk(){
        function metinRenginiDegistir(boya){
            //seciliMetinDegistir("<font color='"+boya+"'>"+seciliMetin()+"</font>");
            alert("a");
        }
        var sagic;
        var renkler=new Array("#000000","#FF0000","#00FF00","#0000FF","#FFFF00","#00FFFF","#FF00FF","#666666");
        var adlar=new Array("Siyah","Kırmızı","Yeşil","Mavi","Sarı","Turkuaz","Magenta","Gri");
        for(i=0;i<renkler.length;i++){
            sagic=sagic+"<tr><td><div **onclick='metinRenginiDegistir(this.style.background)'** style='cursor:pointer;width:28px;height:28px;background:"+renkler[i]+";margin-left:17px;'></div></td><td>"+adlar[i]+"</td><td>"+renkler[i]+"</td></tr>";
        }
        sagic="<center><table id='renklerinTablosu'><tr><th>Önizleme&nbsp;&nbsp;</th><th>Renk Adı&nbsp;&nbsp;</th><th>Renk Kodu</th></tr>"+sagic+"</table></center>";
        sag.innerHTML=sagic.replace("undefined","");
        //document.getElementById("renklerinTablosu").getElementsByTagName("div").onclick=function(){alert("a");}
        // onclick='metinRenginiDegistir(this.style.background)'
    }

I don't think you're going to be able to access the 'metinRenginiDegistri' function from outside the function scope of renk. Better to simply move that function into a different scope. — oliakaoil
– oliakaoil, Commented Jul 1, 2014 at 16:27
EXACTLY. You define metinRenginiDegistir() inside of renk(). That's the problem. <div onclick='metinRenginiDegistir()'> expects it to be in the GLOBAL scope, on the same level as renk. — Rodney G
– Rodney G, Commented Jul 1, 2014 at 16:40
@zencimusa You're creating the HTML that attaches the function to the event in the loop, you're not actually calling the function there. — Patrick Q
– Patrick Q, Commented Jul 1, 2014 at 16:40

WebWanderer · Accepted Answer · 2014-07-01 16:50:50Z

1

They're correct, you can't reach metinRenginiDegistir() because its not within scope. what you can do, is re-write 'function metinRenginiDegistir()' as 'this.metinRenginiDegistir = function(){}.bind(this);'. Now, set your variable 'onclick' to 'this.metinRenginiDegistir()', (only if your setting it within 'renk()') or, outside of 'renk'()', set a variable equal to an instanciation of renk() and use that:

var renkInstance = new renk();

...onclick = renkInstance.metinRenginiDegistir;

You can't reach 'metinRenginiDegistir' from outside of 'renk()', but you can reach 'metinRenginiDegistir' from 'renk()'s scope using your instanciation of 'renk()', renkInstance.

answered Jul 1, 2014 at 16:50

WebWanderer

11k5 gold badges36 silver badges53 bronze badges

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

Collectives™ on Stack Overflow

Onclick event in a function not able to call nested function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related