JavaScript Functions | Build an HTML Alert Box
JavaScript functions let you name a task and run it when needed. We shall conquer them by building an HTML alert box, then showing a result on the page without wiping it out.
It is advisable you follow the standard learning routine by finishing Chapter 1 of JavaScript first before arriving here. Already done? Whoa, you are a tiger! Let’s claw in, shall we?
Understanding JavaScript Functions: Syntax
For those who aren’t aware of what functions are at all, I will do what I do best. Dumb it down! Try looking at functions like this:
Imagine you are a magician in Hogwarts. You are holding a magic wand, and a chest of locked gold is waiting to be opened. What do you do? That’s right you use the unlocking charm Alohomora!
Think of the spell’s instructions as a function definition. Saying the charm is the function call that runs those instructions. The chest opens because you called the right function. As simple as that!
It is just that instead of shouting a charm you have to actually follow a syntax whilst working with languages. Here in JavaScript, and in a lot of other languages, the following syntax is used in profusion:
function xxx() {
your function goes here;
}In the above syntax simply replace ‘xxx’ with whatever your function name is. Put valid JavaScript statements inside the braces. The words in this skeleton are placeholders, not runnable code. A function declaration does not need a semicolon after its closing brace; the statements inside can end with semicolons. Remember the braces!
HTML Alert Box Existing Examples
What is an alert box, you ask? Remember that irritating box that used to pop up whenever you wanted to do something? Well that’s about it. Although people search for an HTML alert box, JavaScript’s alert() actually opens the browser dialog. It normally offers an OK button; the browser controls its appearance.
The screenshots below show an older browser. Yours may look different. An alert normally pauses the calling script until dismissed, although browsers can suppress dialogs in some situations.
- Today alert box kind of appears something like this:
A JavaScript Confirm Box, au contraire, is a slight variation of it wherein it provides two buttons namely ‘OK’ and ‘Cancel’. It returns true for OK and false for Cancel, so an if statement can handle the choice.
- Here’s what a confirm dialog box looks like:
We shall see this too at a later stage.
Steps to display JavaScript or HTML Alert Box
That brings us to create one of our own to understand it better. To begin with let’s try to create the infamous alert box in JavaScript or HTML which also goes by the name JavaScript Popup Box or JavaScript Dialog Box.
Bring all your previous HTML and JavaScript learning to test, by weaving up a button. If you are not sure how, you can go back turn your leaflets to read the second chapter of HTML on how to create a button.
Step 1: You have that JS folder with you still? Good! Right click to create a New Text Document to start afresh. Make sure you have a button created to perfection. If you forget something go back and check. I am assuming you have the following HTML code with you now.
Step 2: Now bringing our JavaScript knowledge to test, let’s start by creating scripts tag first in the above code. Here’s what it should look like when you add the <script> tag to it:
JavaScript Functions: Definitions and Calls
Next step would be our shot at getting function right. You see to create a function we need two elements:
- Function (Whatever needs to happen)
- Caller (Name of the Charm)
Picking up the first step we will write a function to establish the creation of a JavaScript alert box. The syntax to write an alert box function in JavaScript is easy-peasy as well:
alert(message)
That’s about it! There is an inbuilt method called alert() method that takes care of the appearance of the box based on your browser. So there is literally nothing we need to do here. Moving on.
Step 3: Inside your <script> tags, shoehorn a function to depict an alert box. Make sure you use the right syntax when working on it. Here’s how it would and should look:
Use alert("Cowabunga!"); inside your function. Keep the message in matching quotes, and use a semicolon consistently at the end of the statement.
Calling JavaScript Functions from a Button
Did we establish what should call myFunction() hitherto. Of course not! So this brings us to the second element of our equation. Caller viz. “the name of the charm”. Meaning we need to call myFunction() to display the alert Cowabunga. Where shall we put it? You guessed right: in the opening button tag’s onclick attribute.
Now a button tag has an inbuilt attribute called ‘onclick’ that understands what should happen when you click the button. So, we are going to exploit that!
Step 4: Focus on the button tag, and assign the function you had created to the onclick attribute. It should be put under double inverted commas. Here’s how:
Are we good? Don’t nod, I can’t see you. So to look at it from a distance here’s how our entire code would look like:
Let’s save the shit outta it, and run to see the output.
The Final Output
Step 5: Save the file as .html and open it in a browser to check. Here’s our first glance at it:
This looks very familiar, doesn’t it. Okay so now do what it says.
Step 6: Don’t be shy just click it! Click the damn button!
Phew! That was exhausting.
Okay we aren’t done yet. You might have noticed how when you clicked on the OK button above, nothing actually happened. You want something to happen? Well, to that I would say, whatever you want or wish to do should just follow the alert function, and you can get the job done.
Step 7: The original screenshot below appends document.write(). Treat it as a legacy demonstration: after the page has loaded, that method can replace the whole document. Use the safe example below for your own page.
Step 8: Done? Now save it once again, simply reload your page and then click on that abusive button. When given the option to click Ok, this time do it. The old example produces this result by replacing the page. Our updated example keeps the button and changes only a result paragraph:
Did you get it? Alright. Celebratory rounds on me!
JavaScript Functions: A Complete Working Example
Save this as functions.html, choose All files if your editor asks for a file type, and open it in a browser. Click the button, dismiss the alert, and look for “Something happened!” beneath it. Click again: the button should still work. No disappearing page. Magic with a little less collateral damage.
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Function practice</title></head>
<body>
<button type="button" id="show-message">Click me</button>
<p id="result" aria-live="polite"></p>
<script>
function showMessage() {
alert("Cowabunga!");
document.getElementById("result").textContent = "Something happened!";
}
document.getElementById("show-message").addEventListener("click", showMessage);
</script>
</body>
</html>The script appears after the button and paragraph, so both elements exist when it runs. addEventListener connects the click to showMessage. Notice there are no parentheses after the function name here: we pass the function for the browser to call later. Writing showMessage() there would run it immediately instead.
Inside the function, textContent changes only the paragraph’s text. It does not replace the document or interpret that string as HTML. The type="button" attribute also prevents the button from accidentally submitting a form if you reuse it inside one.
Troubleshooting JavaScript Functions
Nothing happening? Open the browser developer console and read the first error. Check the function name’s spelling and case, matching quotes, and closing braces. Make sure the file ends in .html, not .html.txt, and save before refreshing. If the alert opens on page load, check that you passed the function to the event listener rather than calling it there.
An alert is handy for this small lesson, but repeated popups interrupt readers. Prefer a visible message in the page for ordinary feedback. For the browser behavior and restrictions, see MDN’s alert documentation.
