Your job is to create a valid script that will make the first paragraph appear or
disappear when you click the Show/Hide button. The methods for doing this are those
discussed in our tutorial: the target (the
thing on which you click) listens for the event (the click), and causes a
JavaScript function to fire and modify the page when the event occurs.

Guide to approaching the problem

Remember that it’s best to go step by step to make sure that all of your script is doing
what you want it to do. Start with something like the following in your separate
JavaScript file, which should be called something like yourName.js:

Save the JavaScript file and link it to your HTML document in the
<head> using the <script> element. (See the Introduction to JavaScript if you
need a refresher on how to do this.) If all goes well, something will happen when your
page loads. The processing flow is that the JavaScript assigns the init()
function to fire when the window (the entire page, including everything linked to it in
the <head>) finishes loading. That function, in turn, fires a
JavaScript alert, or popup. If you don’t see the popup, either there’s a problem with
your JavaScript code or you haven’t linked to it properly from your HTML.

The next step is to create a variable that corresponds to what you want your script to
interact with. In our in-class example, we used .getElementsByTagName() or
.getElementsByClassName(). However, in this document, there are two
<p> elements, and we want to have the Show/Hide button interact
only with the first paragraph, so we can’t use .getElementsByTagName('p'),
which would apply to all (in this case, both) <p> elements equally.
And we can’t use .getElementsByClassName() because this document doesn’t
have any @class attributes. You’ll need to find an alternative method to
use that will only catch the first paragraph. (Hint: What does the first paragraph have
that the second does not?)

This code sets a variable buttons equal to an HTML collection
(which you can think of a similar to an array, although there are some subtle technical
differences) of all <button> elements in the document. There is only
one such element, but you still get a collection (of one item, which may seem silly, but
that’s how the function works). To get the first (in this case, only) element of the
collection, you use an index number, which is like a numerical predicate in
XPath, except that the first item of a sequence in XPath is #1, but the first item in a
JavaScript array is item #0. Whether complex objects start counting from 0 or from 1
depends on the programming language, and it’s an annoying detail that just has to be
memorized.

Next, you need to write a new function that will tell the script what to do with the
Show/Hide button, that is, what the show_hide() function should do. Our
solution uses an if/else statment that says: If the paragraph is visible, make it
disappear. If the paragraph is hidden, make it appear. The code you’ll need to
make something invisible is:

element.style.display = "none"

Note that you can’t use the preceding line just as is; you have to replace the
word element with something that points to the element whose visibility you want
to toggle. The first way to approach writing this part of the code, then, is to decide
how you’re going to find and manipulate the specific paragraph whose visibility you want
to toggle. How to integrate the manipulation of that element into an if/else statement
is for you to determine, and you may want to read about JavaScript if/else statements in
the tutorial on the W3 Schools
website.

Remember to save and run your script in a browswer window frequently. It’s easy to make a
small mistake after working for a while, and difficult to find your errors if you
haven’t been checking your progress at every step, or, at least, frequently.