Create Button In Javascript

Question

I am trying to create a button that pops up a menu in the center of my canvas. I originally created a button in the HTML file that did this, but when my sprite updated every second it would put the canvas over the menu. So now I am trying to create it in the Javascript file.

Right now I have something like this:

function menuButton(ctx, func) {
    var button = document.createElement("menu");
    button.type = "button";
    button.value = "menu";
    button.onclick = func;
    ctx.appendChild(button);
}

window.onload = function () {
    createButton(canvas, function () {
        highlight(this.parentNode.childNodes[1]);
    });
}

But I am not getting anything to display on the screen for the button. The goal is to get the button to always display, and then when clicked it will load a screen that has other buttons (ex. settings, stats, etc).

adeneo · Accepted Answer · 2014-05-08 17:31:55Z

3

menu is not a valid HTML element, so you can't create it.

function menuButton(ctx, func) {
    var button     = document.createElement("button");
    button.type    = "button";
    button.value   = "menu";
    button.onclick = func;
    ctx.appendChild(button);
}

answered May 8, 2014 at 17:31

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

Comments

keeganwatkins · Accepted Answer · 2014-05-08 17:39:41Z

0

Any child nodes of a canvas element will only be rendered if the browser does not implement canvas (fallback content).

You'll need to create the button using the canvas drawing APIs instead. There are some great examples of how to do this on the MDN Canvas Tutorial.

Hope that helps, cheers!

answered May 8, 2014 at 17:39

keeganwatkins

3,6961 gold badge16 silver badges12 bronze badges

Collectives™ on Stack Overflow

Create Button In Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related