Making use of Javscript’s Alert feature


Javascript is the element which can make or break the webpage’s interactivity. Today, I’ll show you how to make use of javascripts’ alert feature which opens up as a popup displaying a message. This alert box can be used for various purposes like displaying error messages, displaying warnings as well as displaying confirmations. This is a much simpler way of displaying a popup than using some 3rd party extension.

HTML

The HTML used here is very simple. We just make a webpage with basic attributes and make a button, which on clicking will show you the alert popup box :-

<html>
<head>
<title>
javascript Alert
</title>
<body>

<input type="button" onclick="display_alert()" value="Click ME!">

</body>
</html>

As seen, this is just some basic Html through which we have made a button which says on it Click ME!. This will be fun as it will attract attention. On clicking, it calls upon the myFunction(through the javascript).

JAVASCRIPT alert()

The javascript which accompanies the HTML is just of one line using the alert() feature :-

<script type="text/javascript">// <![CDATA[
// <![<span class="hiddenSpellError" pre="">CDATA</span>[
// ]]></script>
function myFunction()
{
alert("Ouch!");
}

Here,we make a function called myFunction() which uses the alert and within that, the message we want to show is Ouch! Funny Thing

ALL THE CODE TOGETHER

<html>
<head>
<script>
function display_alert()
{
alert(" Ouch!");
}
</script>
</head>
<body>

<input type="button" onclick="display_alert()" value="Click ME!">

</body>
</html>

DEMO HERE →

Enter your email address to follow this blog and receive notifications of new posts by email.

One thought on “Making use of Javscript’s Alert feature

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s