In this video, I'm going to show you how to enable and disable a play button in a gaming interface.
Video Transcription
Hi. My name is Brian McClain. I'm an instructor of JavaScript and Python programming at Noble Desktop in New York City. In this video, I'm going to show you how to enable and disable a play button in a gaming interface. So let's check out this memory game in the browser. The idea is you have a play button that shouldn't be active and yet, as it is now, the user thinks they can click on it.
We want the button to be grayed out and unresponsive until the user chooses the game level from the menu. Currently, the button is lighting up on mouseover. We want to turn that off, but we would also like to disable any JavaScript. So that the button doesn't do anything if you click on it before choosing your game level.
We're going to make the button call a function. I've got my select object and my button element. Notice that neither of them has an ID. We could give them IDs, but you don't have to do that to bring them into JavaScript. We can use querySelector to bring the elements into JavaScript. We'll call it button equals document dot querySelector button.
There is no other button, so it'll know which one to get. And then we'll have menu equals document dot querySelector the select menu. We're going to have the button listen for a click upon itself. When that takes place, it's going to call the play function, which we'll write function, play, and let's just give it an alert. We'll say, "Game on!" and have that as a pop up.
Just so we know that the button is working, refresh the browser and click the button. We get the alert, so the button is totally active, right? It also lights up on mouse over, due to the CSS. Next, we're going to disable the button. Go into the button element and put the disabled attribute directly into the tag. That way, the JavaScript no longer runs when the button is clicked..
The button no longer calls a function, but it's still lighting up and that's due to the CSS. So Let's go into the CSS, find the hover state, and turn that off. The cursor pointer, where it turns into that Mickey Mouse glove, I'm going to turn that off. And we'll tone down the colors. Instead of #394, we'll say #345, which kind of mutes the green.
I don't know if you know this trick, but you can go into a six-digit hex color and add two more values at the end for opacity.. We're adding 33 at the end for a 33% opacity, which will wash it out. Refresh the browser. There! The button looks disabled and indeed it is. So, the next move is when the user chooses from the menu, we want to reactivate the button..
The button comes back to life. So back in our JavaScript, we're going to add an event listener for the menu. A select menu runs functions on change—not on click. And we'll call that function activate play.
Next, set the property disabled equals false. Now it will be able to call the JavaScript. For styling, we want to set the colors back to being a bit brighter when the button is active. So, set the background color to #394. For the color, we just want plain white, with no opacity setting. And we want to go back to the cursor pointer. We've got all that running.
We start out on page load with the disabled button. We choose from the menu, and the button brightens up to indicate that it is now enabled and ready to call the play function. The last little thing we might want is to not have a pop-up.
We do have this text box for feedback. We want the message box, so say message box equals document dot get element by ID message box. And now inside the function, we can set the message box text content equal to Game on! Good luck! Run the page, choose your game level, click the play button—and it says Game on! Good luck! And that concludes this video.
I hope you enjoyed this video. Once again, my name is Brian McClain. I'm with Noble Desktop in New York City, where we have bootcamps in full-stack JavaScript, web development and Python Data Science,—as well as many other great courses available, live online and in-person at our facility. Until next time.
