Find elements and update their text

Your goal: Find part of a page, change its text safely, and open the project through a local web server.

Connect the program to a real page

Complete Programming Foundations with JavaScript first. You already know how to work with values and lists. Now imagine the page as a tree: each heading, paragraph and button is a branch you can find. The browser calls this tree the Document Object Model, or DOM. JavaScript can find the summary paragraph and put a new total into it. Keep meaningful HTML underneath, so the page still has useful headings, labels and lists. This project uses invented study tasks, never private student information.

Create a folder named study-planner and save the following as index.html and app.js in it. The defer attribute makes the script run after the browser has read the whole HTML, so the elements it looks for already exist.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Practice study planner</title>
  <script src="app.js" defer></script>
</head>
<body>
  <main>
    <h1>Practice study planner</h1>
    <p id="summary">No sessions calculated yet.</p>
    <p>Use invented study tasks throughout this project.</p>
  </main>
</body>
</html>

const summary = document.querySelector("#summary");
const sessions = [25, 40, 15];
let total = 0;
for (const minutes of sessions) {
  total += minutes;
}
if (summary !== null) {
  summary.textContent = `Planned practice: ${total} minutes.`;
}
console.log("Found summary:", summary !== null);

Check the page: it should say Planned practice: 80 minutes. The console should show true.

1. querySelector uses a CSS selector to find the first matching element. It returns null if it cannot find one.
2. #summary means "find the element whose ID is summary."
3. textContent writes plain text. Typed <strong> characters stay text rather than becoming HTML.
4. The for...of loop adds the durations, just as in the foundations course.

Prepare for local resource files

The first examples work when you double-click index.html, which opens it as a file:// address. From the fetch lesson on, the browser needs the page to come from a web server, at an http:// address. Set one up now so it is ready. Choose one option:

• VS Code Live Server (easiest). In VS Code, open the Extensions view (Ctrl+Shift+X, or Cmd+Shift+X on a Mac), search for Live Server by Ritwick Dey and install it. Open your study-planner folder, then click Go Live in the bottom status bar. Your browser opens the page at an address such as http://127.0.0.1:5500/.
• Python. Install Python 3 from python.org if python3 --version (or python --version on Windows) does not print a version. Open a terminal in the project folder and run python3 -m http.server 8000 --bind 127.0.0.1 (or python -m http.server 8000 --bind 127.0.0.1 on Windows), then visit http://127.0.0.1:8000/. Stop the server with Ctrl+C.

Either way the server only serves your project folder to your own computer.

Practice and debug

1. Change the durations. Write the total you expect, then check the page.
2. Add a paragraph with ID count and use JavaScript to show the number of sessions.
3. Deliberately misspell the ID in querySelector. Nothing updates because the if check receives null.
4. Compare the HTML ID with the selector and fix the mismatch.
5. Temporarily log the selected element to confirm that JavaScript found the intended paragraph.

Check yourself

1. Why use defer?
2. Why use textContent for task titles?
3. Does a paragraph need a click handler to be useful?

Answers

1. The script depends on parsed elements.
2. They are data, so strings such as <strong>practice</strong> should appear literally.
3. No; native text already communicates the summary.

Project milestone

Keep a working launcher with a total and count, and write its run instructions.

Reference: MDN DOM introduction.