javascript to zepto - Uncaught ReferenceError: setColor is not defined

Question

I am converting a javascript plugin to zepto. I have this small function called setColor which runs on page ready event using zepto. This function runs on onclick event. When clicked, it throws me undefined function error.

<a href="#" class="colorPicker" onclick="setColor('rgb(68,68,68)');return false;" >
        <img src="images/White.png" class="paint-bucket" />
    </a>
<script>

Zepto(function($){
var colorL;
            function setColor(col)
            {
                colorL = context.strokeStyle = col;
            }
});
</script>

P.S = Above code is just a part of my plugin :)

Answer 1

Your setColor function is defined in closure of anonymous function that you provided as argument to Zepto and is invisible in global scope. From the other hand setColor that you are calling as onclick handler should be defined in global scope (which is window). In order to make your setColor function accessible from anywhere you should define it in the namespace of window:

JavaScript

Zepto(function($){
    var colorL;
    window.setColor = function setColor(col)
    {
        colorL = context.strokeStyle = col;
    }
});