Back to Setup Page

Interactive FAQ Page

We have a complete FAQ Page, but it’s not very engaging as a user. Before JavaScript, websites used to be built with only HTML and CSS. You could maybe click a button and go to another page, but that’s about it. Now, we can do so much more thanks to JavaScript!

Accessing an HTML Element with JavaScript

Variables can also reference parts of the HTML we’ve written using the JavaScript method document.querySelector to access that element. For example, if we wanted a variable to represent the h1 heading at the top of our page, we’d need to do two things:

  1. Add a class to the h1 element in the HTML
  2. Use the JavaScript method document.querySelector to access that element

Here’s how that looks in practice:

<!-- HTML code -->
<h1 class="header">Puppy Facts</h1>
// JS code
var title = document.querySelector('.header');

console.log(title.innerText);
// "Puppy Facts" will print out to the console

Event Listeners

In JavaScript, an event listener is a way to set up code to run only when a very specific thing happens. You want to change the text when the user clicks a button? Great! That’s an event listener – you’ll tell the code to listen for a click on a specific button on the page, then run the code that changes the text.

Here’s how that looks in practice:

<!-- HTML code -->
<button>Change the topic!</button>
<h1 class="header">Puppy Facts</h1>
// JS code
var btn = document.querySelector('button');
var title = document.querySelector('.header');

btn.addEventListener('click', function () {
  title.innerText = "Kitten Facts";
})

// "Puppy Facts" will print out to the console

Try It: Access HTML Elements & Event Listeners

The best way to learn this stuff is to try it for yourself! Fork this replit and follow the directions to play around with variables and data types. We will only be working on the HTML and JavaScript files.

  • Declare 3 variables, each storing one of the three paragraph elements in the HTML using the document.querySelector method. You can decide the variable names to use! HINT: In order to access each element, you'll need a unique way to identify each one. This has already been done with the h1 element; you can use that one as an example.
  • Write JavaScript that will change the content of the h1 and three paragraph elements using the variable names you declared and the .innerText method. HINT: You will need to reassign the value of the variableName.innerText to your new text using the assignment operator (=).
  • Use the .addEventListener method so that when the button is clicked, the title and content of the webpage changes to a different topic!

Building in Iterations

Developers don’t code an entire application at once! Instead, they work in iterations, completing only one piece of functionality at a time. You have two options for next steps on your project:

  1. Follow my screen and do a live code-along.
  2. Use this replit to copy and paste the last few lines of CSS and all of the JavaScript into your file and then watch as I code.

Write the JavaScript: Iteration 1

We want to dynamically add the “show-text” class when the user clicks the button.

  • Use document.querySelector to select the element with the question class and store the reference to that element in a question variable.
  • Use querySelector on that question variable to find the button element with the “question-btn” class and store the reference to that element in a button variable.
  • Use addEventListener on the button variable to wait for a click and then add the “show-text” class to the classList on that question.
  • Change add to toggle so that clicking on the button again removes the class.
  • Add a CSS rule targeting the .show text .question-btn classes so that the arrow button rotates 180 degrees.

Now, we have it doing what we want, but it’s only the first one! At this point, your code should look like this if you want to check that you have it working as expected.

Write the JavaScript: Iteration 2

We want this to happen on every question, not just the first one!

  • On line 1, change querySelector to querySelectorAll. This will store an array of all HTML elements with the .question class.
  • Change the variable name question to questions (plural form).
  • Write a forEach method on the list of questions and pass in each question as the argument. Then, move the event listener code block inside of that function to apply the eventListener on all buttons.
  • Remove console.log statements → these are not usually included in the final production. They are only used as a tool for developers.

Now, our FAQ page is fully functional and the user can interact with each element on the screen! The final working solution can be found here.

JavaScript Interactions Summary

  • We can access an HTML element using the document.querySelector JavaScript method.
  • Event listeners allow us to wait for a user action to change something on the page.
  • Everything that changes dynamically on the screen as the user interacts with the web page is all written in JavaScript! It’s a powerful tool and one of the most popular programming languages in the world right now.
  • You likely have some gaps in fully understanding the final solution - again, that is OKAY - the goal of this was not to go deep, but spark some curiosity for what is possible!

Next Section: Extension Challenge
Wrap Up