Buttons, clicks, and changing the page while it is running
← Back to Web CodingSo far HTML and JavaScript have been strangers living in the same file. This is where they meet: JavaScript can reach into the page, find an element, and change it.
Give the element an id, then look it up by that id:
<h1 id="title">Before</h1>
<script>
const heading = document.getElementById("title");
heading.textContent = "After!";
</script>
Try it — this is live
The page loads saying Before, and the script changes it so fast you only ever see After!.
A class can be on many elements — it is a kind of thing. An id must be on exactly one — it is a name. Use an id when JavaScript needs to find one particular element.
<p id="one">Change my words</p>
<p id="two">Change my colour</p>
<p id="three">Change my size</p>
<script>
document.getElementById("one").textContent = "Changed!";
document.getElementById("two").style.color = "crimson";
document.getElementById("three").style.fontSize = "28px";
</script>
Try it — this is live
.textContent — the words inside it.style.color — any CSS property, set from code.style.backgroundColor — note the capital CIn CSS it is background-color. In JavaScript a hyphen would look like a minus sign, so it becomes backgroundColor — hyphen gone, next letter capitalised. Same for font-size → fontSize.
This is the whole point. addEventListener says: when this happens, run this.
<button id="go">Click me</button>
<p id="count">Clicked 0 times</p>
<script>
let clicks = 0;
const button = document.getElementById("go");
const label = document.getElementById("count");
button.addEventListener("click", function () {
clicks = clicks + 1;
label.textContent = `Clicked ${clicks} times`;
});
</script>
Try it — this is live
Read it as a sentence: on the button, listen for a click, and when one comes, run this function. The function sits there doing nothing until somebody clicks.
The browser reads your page top to bottom. Put the <script> above the button and getElementById comes back with null, because the button does not exist yet. Script at the bottom, always.
An <input> box carries what the user typed in its .value:
<input id="name" placeholder="Your name">
<button id="say">Say hello</button>
<p id="out"></p>
<script>
document.getElementById("say").addEventListener("click", function () {
const typed = document.getElementById("name").value;
document.getElementById("out").textContent = `Hello, ${typed}!`;
});
</script>
Try it — this is live
Type 5 into a box and .value gives you "5", not 5. Adding it to a number joins instead of adds. Wrap it in Number(...) first.
You are not limited to what the HTML already contains — you can build more:
<button id="add">Add a line</button>
<ul id="list"></ul>
<script>
let n = 0;
document.getElementById("add").addEventListener("click", function () {
n = n + 1;
const item = document.createElement("li");
item.textContent = `Item number ${n}`;
document.getElementById("list").appendChild(item);
});
</script>
Try it — this is live
createElement makes it, appendChild puts it on the page. Until you append it, nobody can see it.
document.getElementById("name") finds one element by its id..textContent changes its words; .style.something changes its look.backgroundColor.addEventListener("click", function () { … }) makes things happen..value reads an input — and it is always text.<script> after the things it looks for.