From Console to Browser

Introduction

In the last lesson, you used semantic HTML to give your page structure and meaning. Now you will keep that structure and add JavaScript behavior to it.

In the terminal, console.log() prints text output. In the browser, JavaScript can change visible elements and respond to clicks.

Your JavaScript logic is still the same: variables, conditionals, loops, and functions. The new piece is the browser's document object.

Learning Objectives

• Connect JavaScript to HTML with document.getElementById()
• Update what users see with .textContent
• Respond to clicks with .addEventListener()
• Test quick DOM changes in DevTools

Quick Bridge from Semantic HTML

Semantic HTML answered: What does this content mean?

Browser JavaScript answers: How should this content behave?

You already have a Vite template and setup instructions from your instructor. This lesson focuses only on the examples.

Example 1: Change Text on Page Load

HTML

<main>
  <h1 id="title">Console mindset</h1>
  <p id="message">Waiting for JavaScript...</p>
</main>

JavaScript (src/main.js)

const title = document.getElementById(`title`);
const message = document.getElementById(`message`);

title.textContent = `Browser mindset`;
message.textContent = `JavaScript found these elements and updated the page.`;

What Happened

1. JavaScript selected existing HTML elements by id
2. .textContent replaced visible text
3. You saw results directly in the page, not only in the terminal

Example 2: Add a Click Interaction

HTML

<main>
  <h1 id="greeting">Hello, console habits</h1>
  <button id="change-greeting" type="button">Update greeting</button>
  <p id="count">Clicks: 0</p>
</main>

JavaScript (src/main.js)

let clickCount = 0;

const greeting = document.getElementById(`greeting`);
const changeButton = document.getElementById(`change-greeting`);
const count = document.getElementById(`count`);

changeButton.addEventListener(`click`, () => {
  clickCount = clickCount + 1;
  greeting.textContent = `Hello, browser habits`;
  count.textContent = `Clicks: ${clickCount}`;
});

What to Notice

1. clickCount is normal JavaScript state
2. The function runs only when the user clicks
3. The page updates instantly when .textContent changes

DevTools Mini-Check (1 Minute)

Open DevTools (F12 or Cmd+Option+I) and run:

document.getElementById(`greeting`).textContent = `Changed from DevTools`;

If the heading text changes, your JavaScript and HTML are connected correctly.

Quick Practice

1. Change the button label to Add 1 click
2. Make the greeting switch between two messages every click
3. Add a second button named Reset
4. Reset should set the counter back to 0

Keep the scope small. The goal is to practice selecting elements, updating text, and handling clicks.

Key Takeaways

• Browser JavaScript is your same JavaScript logic plus the document object
• Semantic HTML gives structure; JavaScript adds behavior
• getElementById, .textContent, and addEventListener are your first core DOM tools
• DevTools Console is the fastest place to test tiny DOM changes

Next lesson: deeper DOM selection and manipulation patterns.