Student Work

Lesson 15: Hiding and Showing Elements

When developing a game, you will often times want to make elements appear and dissappear. One way of doing this is to change the elements location. We did this in the Shooting Monkeys project. You can always move an element far off the screen to make it dissappear. However, there are more elegant solutions than this which you will learn in this lesson.

1. First, make the green "GO" button do something. Locate the btnGodiv in the HTML and add an onclick to call a function named go().

2. In the JavaScript, create the go() function and add an alert() to test it out.

Now a message should appear when the button is pressed.

Later we will modify the code to have the computer randomly select rock, paper, or scissors. However, we don't want the player to be able to press the GO button until they have first selected rock, paper, or scissors themselves.

3. One way to ensure the player selects rock, paper, or scissors before they press the button is to hide the button until they have done so. We can do this in the CSS by setting the btnGovisibility property to hidden.

Now when the page is refreshed, the button is hidden. Always think of your CSS file as a place to set the initial styles for your page. These styles may be changed during gameplay via JavaScript.

4. If you have not done so already, declare btnGo as a global variable and then set it equal to the btnGodiv element after the page is finished loading.

5. Add the line of JavaScript code to change the visibility of btnGo to visible. Place it in the select() function because that is when you want it to appear (when the player selects rock, paper, or scissors).

6. Try it out. When the page loads, the GO button should not be visible but should appear once the a selection is made. Pressing the GO button will still display a message.

Note that just as you can dynamically (while the game is running) change the visibility property of an element to visible, you could also dynamically change it to hidden. This comes in handy when you want something that is visible to dissappear.

The visibility property works for hiding and showing HTML elements. However, it has some drawbacks since the element is still there, but just invisible. This will give you problems in many instances, such as when you are testing to see if two elements are colliding. To truly remove the element from the gameScreen, you can use the display property instead of the visibility property.

7. In the CSS sytle for #btnGo, replace the visiblity: hidden; with display: none;.

8. Similarly, in the JavaScript, change the last line of code in the select() function to set the display of btnGo to block.

9. Try it out again. The function should work the same.

To avoid strange things happening in your game due to the presence of invisible elements, use the display property to hide and show elements instead of the visibility property.

Test Yourself!

1. One way to hide an element is to set it's visibility to:

none

0 (0%)

1 (100%)

hidden

2. One way to show an element is to set it's visibility to:

visible

0 (0%)

1 (100%)

show

3. One way to hide an element is to set it's display to:

block

none

visible

hidden

4. One way to show an element is to set it's display to:

block

none

visible

hidden

5. Why is using the display property to hide and show elements often better than using the visibility property when creating games with JavaScript?

The visibility property does not work with all HTML elements.

Elements hidden with the visibility property are invisible but still there, which could result in unnexpected behavior.

The visibility property is not recognized by all web browsers.

Elements hidden with the visibility property cannot be made visible again.