My checklist
Web Adventures · Week 10

Change the Page

Aim: Use JavaScript to change text on a webpage.

New coding words

  1. function
  2. id
  3. element
  4. document
  5. textContent

What the coding words mean

  1. function: A named group of instructions that performs a task.
  2. id: A unique label used to find one HTML element.
  3. element: One part of a webpage, such as a heading, paragraph or button.
  4. document: The webpage that JavaScript is working with.
  5. textContent: The words displayed inside an HTML element.
Code along

Change the Page

This code creates a button that uses JavaScript to find a paragraph by its ID and replace the paragraph’s message.

Coding space

Edit index.html for your webpage’s content. Use style.css to change its colours, fonts and layout. Use script.js to add actions and make your webpage interactive. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage
What will you create?

Select Run my code to see your webpage here.

Mini project

Joke Revealer

This code creates a styled joke card whose button uses JavaScript to reveal the joke’s answer.

Coding space

Edit index.html for your webpage’s content. Use style.css to change its colours, fonts and layout. Use script.js to add actions and make your webpage interactive. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage
What will you create?

Select Run my code to see your webpage here.

Your mini-project to-do list

0 of 4 completed

Complete these activities in the mini-project editor above. After each change, select Run my code to check your webpage.

Save your finished mini project

Select Download my work and save the file as week_10_joke_revealer.zip. Extract this .zip file to keep your HTML, CSS and JavaScript files together, then open index.html in a browser to view your webpage.

Debugging detective

Chi Opara, your course guide

Knowledge check

Question 1

Which attribute gives an element a unique label?

Question 2

What does textContent change?

Your answers are checked in this browser and are not submitted.

How are you getting on so far?

My checklist

Finished Web Adventures Week 10?

Your completion and mood are saved only in this browser.