CODEWITHSUNDEEP
javascripthtmlbuttonmenu
user3617508
user3617508

Reputation: 21

Create Button In Javascript

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).

Upvotes: 0

Views: 227

Answers (2)

keeganwatkins
keeganwatkins

Reputation: 3686

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!

Upvotes: 0

adeneo
adeneo

Reputation: 318182

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);
}

Upvotes: 3

Related Questions