Skip to main content
ScotlandComputer ScienceSyllabus dot point

How do you make a web page respond to the user and change its content?

Adding interactivity with JavaScript: responding to events (such as onclick and onmouseover), writing functions, and changing page elements through the DOM (for example getElementById and innerHTML).

An SQA Higher Computing Science answer on JavaScript, covering responding to events such as onclick and onmouseover, writing functions, and changing page elements through the DOM with getElementById and innerHTML.

Generated by Claude Opus 4.811 min answer

Reviewed by: AI editorial process; not yet individually human-reviewed

Have a quick question? Jump to the Q&A page

Jump to a section
  1. What this key area is asking
  2. What JavaScript adds
  3. Events
  4. Functions
  5. Changing the page with the DOM
  6. Examples in context
  7. Try this

What this key area is asking

The SQA wants you to add interactivity with JavaScript: responding to events (such as onclick and onmouseover), writing functions, and changing page elements through the DOM (for example getElementById and innerHTML). You should read and write short scripts that make a page respond to the user.

What JavaScript adds

So a page that just shows information needs only HTML and CSS; a page that reacts (a button that reveals text, a menu that highlights on hover, input that is checked as you type) uses JavaScript.

Events

An event is often attached in the HTML, naming the function to run:

<button onclick="showMessage()">Show</button>

Clicking the button fires the onclick event, which runs the showMessage function.

Functions

A function is a named block of code that performs a task when called. In JavaScript:

function showMessage() {
  // code to run goes here
}

Functions keep code organised and reusable: an event handler is just a function the browser calls when the event happens. The same function can be called by several events or from other functions.

Changing the page with the DOM

function showMessage() {
  document.getElementById("msg").innerHTML = "Thank you";
}

This finds the element whose id is msg and replaces its content with "Thank you". The element must have a matching id in the HTML (<p id="msg"></p>).

Examples in context

This is the heart of interactive web pages. A "show more" button, a form that warns you before you submit, an image gallery that changes picture on click, a live character counter - all use events, functions and the DOM exactly as here. Modern frameworks (React, Vue) automate DOM updates, but they are built on the same getElementById/innerHTML idea you learn at Higher. In the SQA assignment you add JavaScript to make a page respond to the user, and the question paper asks you to write a short event-driven function and to explain events and DOM manipulation.

Try this

Q1. State what an event is in JavaScript. [1 mark]

  • Cue. Something that happens on the page (often a user action) that JavaScript can detect and respond to by running a function.

Q2. State the JavaScript method used to find an element by its id. [1 mark]

  • Cue. document.getElementById("...").

Q3. State what setting an element's innerHTML does. [2 marks]

  • Cue. It changes the content displayed inside that element, updating the page without a reload.

Exam-style practice questions

Practice questions written in the style of SQA exam questions on this dot point, with worked answer explainers. The year tag is the paper they imitate, not the source.

SQA Higher (style)5 marksA page has a button and an empty paragraph with id 'msg'. Write the HTML for the button and the JavaScript so that clicking the button changes the paragraph's text to 'Thank you'.
Show worked answer →

An onclick event on the button calls a function; the function uses getElementById to find the paragraph and innerHTML to change its text.

<button onclick="showThanks()">Click me</button>
<p id="msg"></p>

function showThanks() {
  document.getElementById("msg").innerHTML = "Thank you";
}

The onclick attribute links the button to the function; getElementById("msg") selects the paragraph by its id; setting innerHTML changes the displayed text.

Markers reward the onclick calling a function, getElementById with the correct id, and setting innerHTML to the new text.

SQA Higher (style)3 marksExplain what an event is in JavaScript and give two examples of events that a web page can respond to.
Show worked answer →

An event is something that happens on the page that JavaScript can detect and respond to, usually caused by the user or the browser. When the event occurs, an associated function (an event handler) runs.

Two examples: onclick, which fires when the user clicks an element (such as a button); and onmouseover, which fires when the user moves the pointer over an element. (Other valid examples: onchange when an input's value changes, onload when the page finishes loading.)

Markers reward defining an event as something the page can detect and respond to by running a function, and two valid event examples such as onclick and onmouseover.

Related dot points

Sources & how we know this