WDD11 - JavaScript: events and functions
- I can write a simple JavaScript function and place it inside a script element.
- I can attach a function to an element using the onclick, onmouseover and onmouseout event attributes.
- I can use a function to change a simple property of an element in response to an event.
- I can correctly call a function from an onclick, onmouseover or onmouseout attribute.
- I can explain why onmouseover and onmouseout are normally used together as a pair.
- I can identify a missing or broken piece of a working events-and-functions example, and fix it.
WDD11 is the course's first pure JavaScript lesson - the warm up bridges from WDD10's CSS :hover, which JavaScript events can do more than.
Key vocabulary
Introducing JavaScript
A third language, with a different job
Every lesson so far has used two languages: HTML for structure and content, and CSS for appearance. JavaScript is the third language in the course, and it has a different job from both: it adds behaviour - code that runs in response to something happening, such as a pupil clicking a button or moving their mouse over an image. JavaScript code is written inside a <script> element, which can appear in the <head> or the <body> of an HTML page.
Functions: named blocks of code that wait to be called
The basic building block of JavaScript behaviour is the function: a named block of statements, written using the function keyword, that sits inactive until something calls it by name. Writing a function does not run it - a function's code only executes at the moment it is called, which in this lesson happens through an event.
function showMessage() {
alert('Button was clicked!');
}On its own, this function does nothing at all when the page loads. It only runs once something calls showMessage() - which is exactly what an event attribute is for.
Events and event handlers
Three mouse events
An event is something that happens to an element - a click, or the mouse pointer moving onto or off it. This lesson covers three: onclick (the element is clicked), onmouseover (the mouse pointer moves onto the element), and onmouseout (the mouse pointer moves off the element). Each is written as an HTML attribute on the element itself, with the function to call - including its parentheses - as the attribute's value.
<button onclick="showMessage()">Click me</button>onmouseover and onmouseout are usually a pair
Unlike onclick, which fires once per click and needs no partner, onmouseover and onmouseout are almost always used together. onmouseover makes some change happen when the pointer arrives; without a matching onmouseout to reverse that change when the pointer leaves, the changed appearance or state would simply stay changed forever, rather than behaving like a genuine hover effect.
Fires once per click. No partner event needed.
Fires when the pointer arrives. Usually pairs with onmouseout.
Fires when the pointer leaves. Reverses whatever onmouseover changed.
changing a box's colour on hover
Worked examples
<button onclick="showMessage()">Click me</button>
<p id="output"></p>
<script>
function showMessage() {
document.getElementById('output').textContent = 'Button was clicked!';
}
</script>showMessage().function showMessage() { ... } defined in the script element.<div id="box" onmouseover="highlightBox()" onmouseout="resetBox()">
Hover over me
</div>
<script>
function highlightBox() {
document.getElementById('box').style.background = '#185FA5';
}
function resetBox() {
document.getElementById('box').style.background = '#E6F1FB';
}
</script>highlightBox() the moment the pointer arrives, changing the background.resetBox() the moment the pointer leaves, changing the background back.The browser treats this as a reference to the function, not a call to run it. Clicking the button does nothing visible.
The parentheses actually call the function. Clicking the button runs its code as intended.
A pupil writes <div onmouseover="turnBlue()"> but does not add an onmouseout attribute at all. What will the box look like after the pointer has moved onto it once, then away again?
turnBlue() ran when the pointer arrived, so the box turned blue - but nothing was ever written to change it back, because there is no onmouseout attribute at all.
The box stays blue permanently, even after the pointer moves away.
Practical: events and functions, WebStorm
Build this from scratch - no starter file this time.
- In WebStorm, create a new HTML file called
events.html. - Add a button with an onclick attribute, and a paragraph with an id for it to update.
- Add a <script> element containing a function that changes the paragraph's text when the button is clicked.
- Add a separate div with onmouseover and onmouseout attributes, and matching functions that change its background colour and then change it back.
- Save, open in a browser, and check all three events (onclick, onmouseover, onmouseout) behave correctly.
<button onclick="showMessage()">Click me</button>
<p id="output"></p>
<div id="box" onmouseover="highlightBox()" onmouseout="resetBox()">
Hover over me
</div><script>
function showMessage() {
document.getElementById('output').textContent = 'Button was clicked!';
}
function highlightBox() {
document.getElementById('box').style.background = '#185FA5';
}
function resetBox() {
document.getElementById('box').style.background = '#E6F1FB';
}
</script>Compare your own file against this rather than copying it - the exact ids and colours do not matter, but each event attribute should call a function with parentheses, and onmouseover should have a matching onmouseout.
- Forgetting the parentheses when calling a function from an event attribute. onclick="showMessage" only references the function - it does not call it. onclick="showMessage()" is required.
- Adding onmouseover without a matching onmouseout. Whatever change onmouseover makes will stay in place permanently once the pointer leaves, unless onmouseout is written to reverse it.
- Misspelling the function name between the event attribute and the function definition. JavaScript function names must match exactly, including capitalisation - showmessage() will not call function showMessage().
- Assuming onclick fires only the first time. onclick runs its function every single time the element is clicked, not once only.
Use the exact event names onclick, onmouseover and onmouseout - not vaguer descriptions like "when hovered." If a question shows event-and-function code with something not working, check the parentheses on the function call and whether onmouseover has a matching onmouseout before looking for anything more complicated.
Task Set A - Core questions
<div id="box" onmouseover="highlightBox()">Hover over me</div>
<script>
function highlightBox() {
document.getElementById('box').style.background = '#185FA5';
}
function resetBox() {
document.getElementById('box').style.background = '#E6F1FB';
}
</script><div id="box" onmouseover="highlightBox()" onmouseout="resetBox()">Hover over me</div>resetBox() was already written correctly, but nothing was calling it - the div was missing its onmouseout="resetBox()" attribute entirely, so the highlight from onmouseover was never reversed.
Task Set B - Extension
- In your
events.htmlfile from the main practical, add a new paragraph with an id, starting with the text "Clicks: 0". - Add a new button with an onclick attribute calling a function such as countClick().
- In your script, keep a variable outside any function to store the current count, starting at 0.
- Inside countClick(), increase the variable by 1 and update the paragraph's text to show the new count.
- Save, open in a browser, and click the button several times to check the count increases correctly each time.
<button onclick="countClick()">Click to count</button>
<p id="counter">Clicks: 0</p><script>
let clickCount = 0;
function countClick() {
clickCount = clickCount + 1;
document.getElementById('counter').textContent = 'Clicks: ' + clickCount;
}
</script>The variable clickCount is declared outside the function so it keeps its value between clicks - a variable declared inside the function would reset to 0 every time it ran, and the counter would never go above 1.
File this in OneNote under:
Higher Computing Science > Web Design & Development > WDD11
Timing: content is scoped for a double period and lands on one (Thu 3 Dec 2026, per WDD.md §2a/§4 table) - no compression or extra-time adjustment needed, unlike the surrounding WDD8-10 run. Suggested pace: 8 min warm up + JS/CSS bridge, 15 min JavaScript/function intro + Example 1, 15 min events/pairing notes + context box + Example 2 (including the live hover demo), 10 min Example 3 + common mistakes, remaining time on Task Set A, then Task Set B and the WebStorm practical.
Scope control: deliberately keeps functions simple, with no parameters - matching Chris's L11 and the SQA spec's phrasing of "functions related to mouse events" as one combined, introductory skill. Parameter passing is already covered from the SDD side (SDD8); this lesson does not need to duplicate it. B3's click counter is the only place a variable persisting between calls is introduced, and is extension-only for that reason.
The parentheses-on-call mistake is the single highest-value bug to drill for exam purposes - it is easy to miss when reading code quickly, and A4/A8/A9 test it from three angles: conceptual MC, correct-syntax MC, and a debugging fix.
Practical built from scratch (no starter file), continuing the WDD6/WDD8/WDD10 (starter) vs WDD7/WDD9/WDD11 (scratch) alternation.