Go Back

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 Replit, 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 step is learning how to change the text inside an HTML element from our JavaScript code.

Apply & Explore

Using the Replit you just forked:

Add an h1 element to your index.html file with text of your choice.
In your index.js file, create a variable that stores the h1 element.
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.
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

Next Level

For this challenge, you'll use the same Replit 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!