Creating Your First Interactive Web Page with Vanilla JavaScript

You’ve probably seen flashy sites that change colors, pop up messages, or move things around when you click. Most of those tricks are just plain JavaScript hiding behind a pretty UI. The good news? You can build a tiny interactive page with just a few lines of code, no libraries, no build tools. Let’s walk through it together, step by step, so you can see the magic happen right in your browser.

What You Need Before You Start

A text editor. Anything from VS Code to Notepad will do.
A modern browser. Chrome, Firefox, Edge – all work the same for this guide.
A folder on your computer where you can keep the files. I like to call it first-interactive.

That’s it. No npm, no frameworks, no extra downloads. Just the tools you already have.

Step 1: Set Up the HTML Skeleton

Create a file called index.html inside your folder. Paste the following code. It’s the basic structure every web page needs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Interactive Page</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 2rem; }
    #output { margin-top: 1rem; font-weight: bold; }
  </style>
</head>
<body>

  <!-- Content will go here -->

  <script src="script.js"></script>
</body>
</html>

A couple of things to note:

The <style> block gives us a tiny bit of styling so the page looks neat.
The <script> tag at the bottom loads a file called script.js. We will create that next.
Keeping the script tag at the end of the <body> makes sure the HTML is already on the page before the JavaScript runs. This avoids a common “element not found” error.

Save the file and open it in your browser. You’ll see a blank page with the title in the tab. That’s the canvas for our interaction.

Step 2: Add a Button and a Place to Show Results

Inside the <body> tags, right before the <script> line, add a button and a div where we will display the result.

<button id="magicBtn">Click me!</button>
<div id="output"></div>

Now the page has a clickable button and a spot for text to appear. Refresh the browser and you should see the button. Nothing happens yet – that’s where JavaScript steps in.

Step 3: Write the JavaScript

Create a new file in the same folder named script.js. This is where the interactivity lives. Start with a simple function that generates a random number and shows it.

function showRandomNumber() {
  const randomNum = Math.floor(Math.random() * 100) + 1; // 1 to 100
  const outputDiv = document.getElementById('output');
  outputDiv.textContent = 'Your lucky number is: ' + randomNum;
}

Explanation of the code:

Math.random() gives a decimal between 0 (inclusive) and 1 (exclusive). Multiplying by 100 and adding 1 gives us a range of 1‑100.
Math.floor() rounds the decimal down to the nearest whole number.
document.getElementById('output') finds the <div> we added earlier.
textContent changes the text inside that <div>.

Save the file. At this point the function exists, but nothing is telling the browser when to run it.

Step 4: Hook Up the Button with an Event Listener

Back in script.js, after the function, add a few lines that listen for a click on the button.

const button = document.getElementById('magicBtn');

button.addEventListener('click', showRandomNumber);

What’s happening?

document.getElementById('magicBtn') grabs the button element.
addEventListener tells the browser: “When this button gets a ‘click’ event, run the function showRandomNumber.”
This pattern keeps HTML clean and JavaScript in charge of behavior – a habit that will serve you well as projects grow.

Now refresh the page, click the button, and you should see a number appear below it. Every click gives a new number. Congratulations, you just built an interactive web page with vanilla JavaScript!

Step 5: Test and Tweak

Testing is simple: click the button a few times, make sure the number changes each time, and watch the console (press F12, go to the Console tab) for any errors. If you see something like “Cannot read property ‘addEventListener’ of null,” it usually means the script ran before the HTML element existed. In that case, move the <script> tag to the bottom of the <body> (which we already did) or wrap your code in a DOMContentLoaded event:

document.addEventListener('DOMContentLoaded', function () {
  const button = document.getElementById('magicBtn');
  button.addEventListener('click', showRandomNumber);
});

That extra wrapper guarantees the DOM is ready before we try to attach listeners.

Feel free to play around:

Change the range of numbers.
Replace the text with an emoji.
Add another button that clears the output (outputDiv.textContent = '').

These tiny experiments will cement the concepts in your mind.

Common Mistakes to Watch Out For

Forgetting the script file name – If you type script.js in the HTML but name the file script.jsx, the browser won’t find it.
Using innerHTML for plain text – innerHTML parses HTML tags, which can be a security risk. Stick with textContent unless you really need HTML.
Hard‑coding IDs in multiple places – If you rename the button’s ID in HTML but forget to update the JavaScript, you’ll get a “null” error. Keep IDs consistent or use a single source of truth (like a constant variable).

Wrap‑Up

You now have a complete, working interactive page built with plain JavaScript. The steps were:

Create a basic HTML file.
Add UI elements (button, output area).
Write a simple function that does something useful.
Connect the function to a user action with an event listener.
Test, debug, and experiment.

Every big web app starts with these tiny building blocks. Keep practicing by adding more elements, trying different events (mouseover, keydown), and watching how the page reacts. The more you play, the more natural it becomes.

Happy coding, and see you on the next JS Beginner Hub tutorial!