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?

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

 

 

TABLE OF CONTENTS

 

 

1) ALERT PROMPT CONFIRM

<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()">

• alert() A “regular” popup box.
• confirm() With yes/no confirmation.
• prompt() With an input field.

 

 

2) CONSOLE

<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

<!-- (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

/* (A) BACKGROUND */
#boxBack {
  /* (A1) FULLSCREEN + CENTERED */
  position: fixed; z-index: 999;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  align-items: center; justify-content: center;
 
  /* (A2) TRANSPARENT BACKGROUND + HIDDEN */
  background: rgba(0, 0, 0, 0.5);
  display: none;
}
 
/* (A3) ADD THIS CSS CLASS TO SHOW */
#boxBack.show { display: flex; }
 
/* (B) DIALOG BOX */
#boxWrap {
  min-width: 320px; max-width: 600px;
  padding: 10px;
  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

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

<!-- (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 insert it into a container.

 

 

4B) THE 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

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

<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

<!-- (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

#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

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

 

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

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.

• Bootstrap
• Foundation
• Bulma

 

LINKS & REFERENCES

• Simple Popup Dialog Box – Code Boxx