How do I access JS functions from an array storage?

Question

I'm working with custom "buttons" in html5 canvas. Because I've got so many buttons I think it makes more sense to store then in an array. My dilemma is, I'm not quite sure on how to implement custom functions which are 'attached' to a particular button. I've seen this posting, not exactly sure if that is applicable here.

Clearly btn[i].function+"()"; isn't cutting it.

Here's a JSFiddle.

How can I store a custom function within the button array, and successfully call it upon mouseclick?

Code follows:

<!doctype html>
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <style>
        body {background-color: black; margin: 8px; }
        #canvas {border: 1px solid gray;}
    </style>
    <script>
        $(function() {
            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var $canvas = $("#canvas");
            var canvasOffset = $canvas.offset();
            var offsetX = canvasOffset.left;
            var offsetY = canvasOffset.top;
            var scrollX = $canvas.scrollLeft();
            var scrollY = $canvas.scrollTop();
            var cw = canvas.width;
            var ch = canvas.height;

            var btn = [{
                x: 50,
                y: 100,
                width: 80,
                height: 50,
                display: "Hello There",
                function: "functionA" // Is this right?
            }, {
                x: 150,
                y: 100,
                width: 80,
                height: 50,
                display: "Why Not?",
                function: "functionB" // Is this right?
            }, {
                x: 250,
                y: 100,
                width: 80,
                height: 50,
                display: "Let's Go!",
                function: "functionC" // Is this right?
            }];

            function drawAll() {
                ctx.clearRect(0, 0, cw, ch);
                for (var i = 0; i < btn.length; i++) {
                    drawButton(ctx, btn[i].x, btn[i].y, btn[i].width, btn[i].height, btn[i].display);
                }
            }

            drawAll();

            // listen for mouse events
            $("#canvas").mousedown(function(e) {
                handleMouseDown(e);
            });

            function handleMouseDown(e) {
                // tell the browser we'll handle this event
                e.preventDefault();
                e.stopPropagation();

                // save the mouse position
                lastX = parseInt(e.clientX - offsetX);
                lastY = parseInt(e.clientY - offsetY);

                // hit all existing buttons
                for (var i = 0; i < btn.length; i++) {
                    if ((lastX < (btn[i].x + btn[i].width)) &&
                        (lastX > btn[i].x) &&
                        (lastY < (btn[i].y + btn[i].height)) &&
                        (lastY > btn[i].y)) {
                        // execute button function
                        btn[i].function+"()"; // obviously this is just wrong.
                        console.log("Button #" + (i + 1) + " has been clicked!!" );
                    }
                }
            }

            function drawButton(context, x, y, width, height, text) {
                var myGradient = context.createLinearGradient(0, y, 0, y + height);
                myGradient.addColorStop(0, '#999999');
                myGradient.addColorStop(1, '#222222');
                context.fillStyle = myGradient;
                context.fillRect(x, y, width, height);
                context.fillStyle = 'white';
                // textAlign aligns text horizontally relative to placement
                context.textAlign = 'center';
                // textBaseline aligns text vertically relative to font style
                context.textBaseline = 'middle';
                context.font = 'bold 15px sans-serif';
                context.fillText(text, x + width / 2, y + height / 2);
            }

            function functionA() {
                alert("Yipee Function A!");
            }

            function functionB() {
                alert("Yowza, it's Function B!");
            }

            function functionC() {
                alert("Now showing Function C!");
            }
        })
    </script>
</head>

<body>
    <canvas id="canvas" width=400 height=300></canvas>
</body>   
</html>

@Barmar, @sigmus, @doldt you guys rock. Now of course I can't remotely figure out who gets the win. Sigmus for kicking me (deservedly so) for using the word function poorly. Barmar for quick speed (correct answer first), doldt for awesome screen name. My tendency is to go with Sigmus. Unless... Tiebreaker = find a link of Mozilla Developer Network quality or better describing the correct procedure for this issue? Anybody up for that? I thought not... :^) — zipzit
– zipzit, Commented Sep 4, 2015 at 21:34

sigmus · Accepted Answer · 2015-09-04 21:20:24Z

3

Try to change your buttons to:

{
    display: "Hello There",
    action: functionA 
 }

And to invoke:

btn[i].action();

I changed the name function to action because function is a reserved word and cannot be used as an object property name.

answered Sep 4, 2015 at 21:20

sigmus

3,2473 gold badges25 silver badges31 bronze badges

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

3 Comments

Barmar Over a year ago

It can be used as a property name, but you have to quote it. But I agree with your decision to rename it for ease of use. I showed the alternative in my answer.

doldt Over a year ago

Reserved words (such as function) are allowed as object property keys, see MDN on Reserved Word Usage - no quotes needed either. Of course, it's probably still bad practice.

doldt Over a year ago

Follow-up to my comment above: using reserved words as property names will not work on older browsers, even though it is allowed by the ES5 specification.

doldt · Accepted Answer · 2015-09-04 21:20:18Z

1

You can store references to the functions in your array, just lose the " signs around their names (which currently makes them strings instead of function references), creating the array like this:

var btn = [{
                x: 50,
                y: 100,
                width: 80,
                height: 50,
                display: "Hello There",
                function: functionA
            }, {
                x: 150,
                y: 100,
                width: 80,
                height: 50,
                display: "Why Not?",
                function: functionB
            }]

Then you can call either by writing btn[i].function().

answered Sep 4, 2015 at 21:20

doldt

4,5063 gold badges24 silver badges36 bronze badges

1 Comment

doldt Over a year ago

Do note that using reserved words as property names, such as function, is a bad practice, and should be avoided if possible.

Barmar · Accepted Answer · 2015-09-04 21:21:07Z

Don't put the name of the function in the array, put a reference to the function itself:

        var btn = [{
            x: 50,
            y: 100,
            width: 80,
            height: 50,
            display: "Hello There",
            'function': functionA
        }, {
            x: 150,
            y: 100,
            width: 80,
            height: 50,
            display: "Why Not?",
            'function': functionB
        }, {
            x: 250,
            y: 100,
            width: 80,
            height: 50,
            display: "Let's Go!",
            'function': functionC
        }];

To call the function, you do:

btn[i]['function']();

I've put function in quotes in the literal, and used array notation to access it, because it's a reserved keyword.

Collectives™ on Stack Overflow

How do I access JS functions from an array storage?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related