Javascript banner image.

The previous Javascript posts have all been really simple — it is time to try something slightly more advanced. In this example, I have used the <dl> tag with its children, <dt> and <dd> to create a list of terms and their corresponding definitions.

In this post:

  1. Targeting
  2. Listening
  3. Selecting
  4. Looping

1. Targeting

First we use getElementByID to identify a specific HTML element by its id so that we can “listen”to it. The element we want is the <button>.

2. Listening

Then we add a listener to the <button> element above so that when a specific event happens to that element we can do something. In this case, the specific event we are listening for is the click event on the button that has the id revealer. The name of the event listener and the event match: the click event listener listens for the onclick event.

3. Selecting

We are going to do something to all the <dd> elements in the HTML. We use the querySelectorAll method to select all <dd> elements in the HTML document.

4. Looping

Finally, we loop through all the <dd>‘s in the document by iterating through the array returned by the querySelectorAll method thereby changing the display attribute of all the <dd>s to make them visible. The for loop is a programming pattern that you will encounter in most languages.

See the Pen Javascript addEventListener() method by David Fox (@foxbeefly) on CodePen.

By MisterFoxOnline

CAT Educator

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.