Basic GUIs? Need Help

Help & Support
#1

I know how to create buttons and all that, the problem is I do not know how to remove them from the screen when needed. Imagine this:

  1. Player presses “E” key once, the inventory gui appears.
  2. Player presses “E” key again, the inventory gui is removed.

What do I do?

#2

If you’re creating standard HTML buttons/elements then something like

var buttonElement = document.getElementById('buttonID');
buttonElement.parentNode.removeChild(buttonElement);
#3

There is several ways to make a GUI (HTML, sprites, entities…) so it’s hard to help you with so little informations. Can you link a project or share the code you are using?
You can also take a look here.

#4 
this.inv1 = document.createElement('BUTTON');
script.prototype.update = function (dt) {
    var inv1 = this.inv1;
    inv1.style.position = "absolute";
    inv1.style.width = "50px";
    inv1.style.height = "50px";
    inv1.style.left = "300px";
    inv1.style.top = "200px";
    if (app.keyboard.wasPressed(pc.KEY_E) && currentGUI === "none") {
        currentGUI = "Inventory";
        document.body.appendChild(inv1);
    } else if(app.keyboard.wasPressed(pc.KEY_E) && currentGUI === "Inventory") {
        //remove the button
    }
}

how do I remove the button?

1 Like
#5

This should work :slight_smile:

this.inv1 = document.createElement('BUTTON');
script.prototype.update = function (dt) {
    var inv1 = this.inv1;
    inv1.style.position = "absolute";
    inv1.style.width = "50px";
    inv1.style.height = "50px";
    inv1.style.left = "300px";
    inv1.style.top = "200px";
    if (app.keyboard.wasPressed(pc.KEY_E) && currentGUI === "none") {
        currentGUI = "Inventory";
        document.body.appendChild(inv1);
    } else if (app.keyboard.wasPressed(pc.KEY_E) && currentGUI === "Inventory") {
        var buttonElement = document.getElementById('BUTTON');
        buttonElement.parentNode.removeChild(buttonElement);
    }
}