Displaying an error message on screen

[aaronmck]

Hello

I have a mesh that loads when a button on screen is clicked. The button currently can only be clicked once so duplicate models can't be loaded.

I would like for there to be a message that displays on screen if the user clicks the button more than once.

var gpu_button_counter = 0;
                document.getElementById("gpu_button").addEventListener("click", function () {
                    if (gpu_button_counter > 0) { return false }
                    gpu_button_counter++;

I have this current code. Can anybody provide a solution as to how I would display a message on screen if the button is clicked more than once?

Thanks!

[royibernthal]

Did you take a look at Canvas2D? What do you use to create your buttons?

[aaronmck]

I currently have a Canvas2D in my scene already which handles click events on the actual meshes, which was why I was looking to add a popup error message just to keep them separate.

To create the buttons I used:

$('body').append('<button id="gpu_button" style="position: absolute; right: 20px; top: 110px; font-size: 1em;">Graphics Card</button>');

 

[JCPalmer]

Most GUI designers would set the disabled property on the button listener.  It will grey it.  Users will figure out you can only click once.

document.getElementById("gpu_button").addEventListener("click", function () {
    document.getElementById("gpu_button").disabled = true;
    ...
});

 

[aaronmck]

2 minutes ago, JCPalmer said:

Most GUI designers would set the disabled property on the button listener.  It will grey it.  Users will figure out you can only click once.

document.getElementById("gpu_button").addEventListener("click", function () {
    document.getElementById("gpu_button").disabled = true;
    ...
});

 

Hey, that looks like a better way to do it.

Thanks