- read

Making A Button Do Stuff in JavaScript For Beginners

Liu Zuo Lin 54

Making A Button Do Stuff in JavaScript For Beginners

# Another super step-by-step guide

Liu Zuo Lin
Level Up Coding
Published in
5 min read1 day ago

--

I remember being confused as hell the first few times I tried this back when I was still learning JavaScript. This articles goes out to new JavaScript learners, and hopefully it makes your journey less painful.

What we want to build

A page with a button that increases a number by 1 when clicked.

And when we click the button once, the number increases.

1) Let’s first write the HTML elements

Our first step would be to ensure that all the HTML elements exist — 1) the Hello 2) the button & 3) the number.

Let’s open your VSCode and create a file named index.html

<h1>Hello</h1>

<button>click me</button>

<h1>1</h1>

2) Open your index.html in your browser

Your browser will process and reflect whatever is written in index.html. But every time you make a change, you need to refresh your browser.

Note — at this stage, nothing happens when we click on the button. This is normal, and we’ll deal with this later on.

3) Let’s add the JavaScript tag

To make our button do stuff, we need JavaScript. So we first need to add a JavaScript tag — the <script> and </script>

<h1>Hello</h1>

<button>click me</button>

<h1>1</h1>

<script>

</script>

Whatever that goes between <script> and </script> is JavaScript code.

4) Causing an alert to happen (JavaScript)

<h1>Hello</h1>

<button>click me</button>

<h1>1</h1>

<script>

alert('hello world')

</script>

alert() is a JavaScript function that makes a box containing text appear.

Here, alert('hello world') makes a box containing the text hello world appear at the top of our screen. Make sure to refresh your browser for the new change to take effect. You should see

Note that the alert happens whenever we refresh the page.