6 Ways To Display Messages In HTML Javascript (Simple Examples)

Welcome to a quick tutorial on how to display messages in HTML and Javascript. Just started with Javascript and wondered how to display a message?

The common ways to show messages in HTML and Javascript are:

  1. Alert, prompt, confirm.
  2. Output the message to the developer’s console.
  3. Dialog box (popup box).
  4. Message bar.
  5. Inline messages.
  6. Toast notification.

Just how do these look like and how do they work? Let us walk through some examples in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Notes Show Message Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

DISPLAY MESSAGE IN HTML JS

All right, let us now get into the examples of showing a message in HTML and Javascript.

 

1) ALERT PROMPT CONFIRM

1-alert.html
<script>
// (A) ALERT
function demoA () { alert("Message"); }

// (B) CONFIRM
function demoB () {
  if (confirm("Continue?")) { alert("Yes"); }
}

// (C) PROMPT
function demoC () {
  var name = prompt("Enter Your Name", "Jon");
  alert("Your name is " + name);
}
</script>

<!-- (D) TEST BUTTONS -->
<input type="button" value="Alert" onclick="demoA()"/>
<input type="button" value="Confirm" onclick="demoB()"/>
<input type="button" value="Prompt" onclick="demoC()"/>
Let us start simple, Javascript has 3 native functions to display a message in a popup box:
  • alert() A “regular” popup box.
  • confirm() With yes/no confirmation.
  • prompt() With an input field.

 

2) CONSOLE

2-console.html
<script>
// (A) CONSOLE LOG
function demoD () { console.log("Message"); }
 
// (B) CONSOLE ERROR
function demoE () { console.error("Message"); }
 
// (C) CONSOLE TABLE
function demoF () {
  var data = ["Red", "Green", "Blue"];
  console.table(data);
}
</script>
 
<!-- (D) TEST BUTTONS -->
<input type="button" value="Console Log" onclick="demoD()"/>
<input type="button" value="Console Error" onclick="demoE()"/>
<input type="button" value="Console Table" onclick="demoF()"/>

Next, we have another native Javascript way to display messages – But this time, to the developer’s console. For you guys who have not heard, this is where Javascript outputs all error messages, and whatever you don’t want the users to see.

  • Press F12 to open the developer’s console in most modern browsers.
  • console.log() Will show a message in the developer’s console. This is particularly useful to see what is in a variable or track how a script progresses.
  • console.error() Also shows a message in the console, but in red.
  • console.table() Shows an array or object, in a nice table format.

 

 

3) POPUP DIALOG BOX

3A) THE HTML

3A-dialog.html
<!-- (A) HTML DIALOG BOX -->
<div id="boxBack"><div id="boxWrap">
  <div id="boxTxt"></div>
  <input type="button" value="OK" onclick="dbox()"/>
</div></div>
 
<!-- (B) TEST BUTTON -->
<input type="button" value="Dialog Box" onclick="dbox('Message')"/>

The native Javascript alert() is cool, but there is a problem with it – We cannot customize the styles. To do that, we have to create our own custom dialog box.

  • <div id="boxBack"> Fullscreen background of the popup box.
  • <div id="boxWrap"> The dialog box itself.
  • <div id="boxTxt"> Text to display.

 

3B) THE CSS

3B-dialog.css
/* (A) BACKGROUND */
#boxBack {
  /* (A1) FULLSCREEN */
  position: fixed; z-index: 999;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
 
  /* (A2) TRANSPARENT BACKGROUND */
  background: rgba(0, 0, 0, 0.5);
 
  /* (A3) HIDDEN BY DEFAULT */
  display: none;
}
 
/* (A4) ADD THIS CSS CLASS TO SHOW */
#boxBack.show { display: block; }
 
/* (B) DIALOG BOX */
#boxWrap {
  /* (B1) CENTER ON SCREEN */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
 
  /* (B2) DIMENSIONS */
  min-width: 320px; max-width: 600px;
  padding: 10px;
 
  /* (B3) COLORS */
  background: #fff;
}

Looks kind of intimidating, but take your time to walk through section-by-section. The CSS is not “for cosmetics only”, these actually drive the interface of the dialog box.

 

 

3C) THE JAVASCRIPT

3C-dialog.js
function dbox (msg) {
  if (msg != undefined) {
    document.getElementById("boxTxt").innerHTML = msg;
    document.getElementById("boxBack").classList.add("show");
  } else { document.getElementById("boxBack").classList.remove("show"); }
}

Lastly, just a small bit of Javascript to show/hide the dialog box.

 

3D) DIALOG BOX DEMO

 

4) MESSAGE BAR

4A) THE HTML

4A-bar.html
<!-- (A) MESSAGE BARS CONTAINER -->
<div id="mbar"></div>
 
<!-- (B) TEST BUTTONS -->
<input type="button" value="Default" onclick="mbar('Default')"/>
<input type="button" value="Info" onclick="mbar('Information', 'info')"/>
<input type="button" value="Error" onclick="mbar('An Error!', 'err')"/>

Looking for a less intrusive way? The message bar is as straightforward as it gets. We are basically just creating a new <div> and inserting it into a container.

 

 

4B) THE CSS

4B-bar.css
/* (A) NORMAL */
.mbar {
  padding: 5px; margin: 5px;
  background: #eee;
  border: 1px solid #aaa;
}
 
/* (B) INFORMATION */
.info {
  background: #f1f6ff;
  border: 1px solid #92aad4;
}
 
/* (C) ERROR */
.err {
  background: #ffe7f4;
  border: 1px solid #ff6a6a;
}

Nothing much here – Just cosmetics for the message bars.

 

4C) THE JAVASCRIPT

4C-bar.js
function mbar (msg, css) {
  // (A) CREATE BAR
  var bar = document.createElement("div");
  bar.innerHTML = msg;
  bar.classList.add("mbar");
  if (css) { bar.classList.add(css); }
 
  // (B) CLICK TO CLOSE
  bar.onclick = () => { bar.remove(); };
 
  // (C) APPEND TO CONTAINER
  document.getElementById("mbar").appendChild(bar);
}

Yes, we are basically creating a <div> in Javascript and inserting it into the page.

 

4C) MESSAGE BAR DEMO

 

5) INLINE MESSAGE

5-inline.html
<script>
// (A) INSERT INLINE MESSAGE
function imsg (msg) {
  document.getElementById("imsg").innerHTML = "Message";
  return false;
}
</script>

<!-- (B) DUMMY FORM -->
<form onsubmit="return imsg()">
  <input type="text"/>
  <div id="imsg" style="font-weight:700;color:red"></div>
  <input type="submit" value="Go!"/>
</form>

Need something really simple? Just insert the message directly into a <div>.

 

 

6) TOAST MESSAGES

6A) THE HTML

6A-toast.html
<!-- (A) TOAST HTML -->
<div id="mtoast" onclick="this.style.display='none'"></div>
 
<!-- (B) TEST BUTTON -->
<input type="button" value="Toast" onclick="mtoast('Message')"/>

Lastly, toast messages are kind of like a less intrusive version of the dialog box. You can call this “dialog box kept at a corner”.

 

6B) THE CSS

6B-toast.css
#mtoast {
  /* (A) POSITION */
  position: fixed; z-index: 99;
  top: 5px; right: 5px;
 
  /* (B) DIMENSION */
  width: 200px;
  padding: 10px;
 
  /* (C) COLORS */
  border: 1px solid #c52828;
  background: #ffebe1;
  border: 1px solid #000;
 
  /* (D) HIDDEN BY DEFAULT */
  display: none;
}

This is kind of similar to the dialog box, just not fullscreen.

 

6C) THE JAVASCRIPT

6C.toast.js
function mtoast (msg) {
  var toast = document.getElementById("mtoast");
  toast.innerHTML = msg;
  toast.classList.add("show");
}

Once again, similar to the dialog box.

 

6D) TOAST MESSAGE DEMO

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

EXTRA – FRAMEWORKS

Are the above simple notifications too simple and ugly for you? Then check out some of these frameworks in the market – They already have a whole set of interfaces ready for you to use.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “6 Ways To Display Messages In HTML Javascript (Simple Examples)”

Leave a Comment

Your email address will not be published. Required fields are marked *