JS Popup Alert

JavaScript has three built-in popup boxes: one to tell you something, one to ask a yes-or-no question, and one to ask for a line of text. They are the quickest way to talk to a person, and they are also blunt, ugly, and a little rude. This lesson covers all three, what each one returns, and what to use in real pages instead.

The three boxes are properties of window, so you call them as plain functions:

console.log(typeof alert, typeof confirm, typeof prompt);

// alert: Tell the Person Something

alert shows a message and waits for OK. It has nothing to return, so you use it only for the message itself. A \n inside the text starts a new line:

<button id="go">Show an alert</button>

<script>
  document.getElementById("go").addEventListener("click", function () {
    alert("Saved!\nYour work is safe.");
  });
</script>

// confirm: Ask Yes or No

confirm returns true if the person clicks OK and false if they click Cancel (or close the box). Use the answer in an if:

<button id="del">Delete the file</button>
<p id="result"></p>

<script>
  document.getElementById("del").addEventListener("click", function () {
    const ok = confirm("Delete this file for good?");
    document.getElementById("result").textContent = ok ? "Deleted" : "Cancelled";
  });
</script>

// prompt: Ask for Text

prompt returns what was typed, always as a string. The second argument is a starting value shown in the box. Three outcomes need handling:

<button id="ask">Ask my age</button>
<p id="answer"></p>

<script>
  document.getElementById("ask").addEventListener("click", function () {
    const text = prompt("How old are you?", "16");
    const out = document.getElementById("answer");

    if (text === null) {
      out.textContent = "You cancelled";
    } else if (text.trim() === "" || Number.isNaN(Number(text))) {
      out.textContent = "That is not a number";
    } else {
      out.textContent = "Next year you will be " + (Number(text) + 1);
    }
  });
</script>

// Why They Are Not Used Much Now

• They block everything. The page and all its code freeze until the box is dismissed
• You cannot style them. They look like the browser, not like your site, and look different in every browser
• Browsers limit them. A page that shows too many, or shows one while it is in a background tab, may have them suppressed
• They interrupt. People find them jarring, and screen reader users hear them abruptly

They are still handy for a quick test while you are learning, or for debugging. For a real page, show a message inside the page instead.

// A Better Way: the dialog Element

HTML has a built-in <dialog> element that you can style like any other part of the page. showModal() opens it with a dimmed background, and close() closes it. It does not freeze your code:

<button id="open">Open dialog</button>

<dialog id="box">
  <p>Delete this file for good?</p>
  <button id="yes">Delete</button>
  <button id="no">Cancel</button>
</dialog>

<p id="result"></p>

<script>
  const box = document.getElementById("box");
  const result = document.getElementById("result");

  document.getElementById("open").addEventListener("click", function () { box.showModal(); });
  document.getElementById("yes").addEventListener("click", function () { result.textContent = "Deleted"; box.close(); });
  document.getElementById("no").addEventListener("click", function () { result.textContent = "Cancelled"; box.close(); });
</script>

// Quick Check

const text = prompt("Number?");
const total = text + 1;

// Try It

▶ Open Playground

1. Click Open Playground and click the button. Try OK, then Cancel, then leave the box empty
2. Change the Playground so the greeting uses the name the person typed
3. Add a confirm before the greeting: "Ready?" and say nothing if they cancel
4. Replace the confirm in the Delete example with the dialog element