Back to Setup Page

Connecting HTML & JavaScript

To get all the fun and important interactions on a page, we have to connect the specific parts of HTML that allow interactions to JavaScript!

Note: We will be using jQuery, a JavaScript library, to assist us in completing some of the tasks that follow. If you create your own CodePen at any point, make sure to add jQuery to the pen in order for it to work!

Accessing HTML from JavaScript

Let’s look at the code in this CodePen, also typed out below, to learn how to start the “conversation” between HTML and JavaScript.

<!-- HTML code -->
<p>This is a paragraph</p>
<button class="submit">A button!</button>
// JavaScript code
var paragraph = $('p');
console.log(paragraph.text()); //console will say "This is a paragraph"

var button = $('.submit');
console.log(button.text()); //console will say "A button!"

Changing HTML from JavaScript

Displaying the information that’s already on the page, in the console, is not all that helpful. It was just a stepping stone.

The next stepping stone is learning how to change the text inside an HTML element from our JavaScript code.

Forking a CodePen🍴

From here on out, it is essential you start each activity with the provided CodePen - some starter code has been written that is necessary. Each time you open a CodePen your instructor provides, follow these directions:

  • Click the "Fork" button that lives in the bottom right controls
  • Check that your username now appears in the top left corner
Screenshot with overlay pointing to fork button and location to check username

🍴Fork this CodePen to use it as a starter for the next activity.

Apply & Explore

Using the CodePen you just forked:

  1. Create a variable that stores the h1 element.
  2. On the next line, type something like: variableName.text('new text');, using the variable name you selected and any text you'd like to see in the browser.
  3. Look in the mini browser - it should display the text you typed in that last line of code!

Listening for Button Clicks

The work we’ve done still may not seem too exciting though; what’s the point? It was another stepping stone. This final section will help us put it all together with event listeners. Before we learn the specifics of the code, let’s contextualize it with a real life situation:

Imagine that you’ve just ordered food from GrubHub and are waiting for it to arrive. When the doorbell rings, you’ll stand up from the couch, walk over to the door, open it, and take your food. Guess what? You programmed yourself with an event listener.

In JavaScript, an event listener is a way to set up code to run only when a very specific thing happens. You’ll give instructions to the program to listen for a mouse click on a specific element on the page. When that element is clicked, the program will call a specific function for you.

var button = $('button');

button.on('click', doSomething);

function doSomething() {
  // code you want to be run ONLY when button 
  // is clicked, goes here.

Visualize The Connections

Diagram of variable names matching, function names matching, and note that jQuery must call an element that has an exact match in HTML

Next Level

For this challenge, you'll use the same CodePen you used for the previous one! In the previous challenge, you changed the title, but it happened on page load, so it wasn't very exciting.

Your Challenge: Combine the two new pieces of knowledge/skill you have to change the title only when the button is clicked. A hint is provided at the bottom of the JavaScript file, if you'd like to use that!

Connecting HTML & JavaScript Summary

  • JavaScript can “talk to” the elements in HTML
  • This communication can allow us to write programs that will listen for button clicks and change text on the page

Next Section: Building Dynamic User Experiences