Digital humanities

Maintained by: David J. Birnbaum (djbpitt@gmail.com) Last modified: 2021-12-30T02:38:23+0000

JavaScript exercise 1

Overview

Here is our test HTML, which utilizes @id attributes to be used in our JavaScript functions.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>JavaScript</title>
        <script type="text/javascript" src="practice.js">/**/</script>
    </head>
    <body>
        <h1>JavaScript is fun!</h1>
        <p id="paragraphToToggle">This is a paragraph.</p>
        <div><button>Show/Hide</button></div>
        <p>This is another paragraph.</p>
    </body>
</html>

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:

window.addEventListener('DOMContentLoaded',init,false);
            
function init() {
    alert('The page loaded!');
}

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?)

You will also need a variable for the button itself:

var buttons = document.getElementsByTagName("button");
var button = buttons[0];
button.addEventListener('click',show_hide,false);

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.