JavaScript Output

JavaScript often needs to show a result: a total, a message, a warning. There are four ways to do it, and each one is meant for a different moment. Picking the right one matters — the wrong choice can wipe your whole page or annoy your visitor with a pop-up they did not ask for.

Diagram — see how it fits together

The four ways are: alert(), which pops up a small box; document.write(), which writes while the page is loading; innerHTML, which changes part of the page; and console.log(), which writes a message only you, the developer, can see in the browser's console. In real websites, innerHTML is the workhorse — it is how pages update without reloading.

alert() — the pop-up box

alert("Hello!") stops everything and shows a small box with your message and an OK button. The visitor must click OK before anything else happens. It is useful for testing and for urgent warnings, but use it sparingly — a page that pops up boxes on every click is a page people close.

alert("Your order is confirmed!");

document.write() — writing while the page loads

document.write() writes directly into the page, but only while the page is still loading. If you call it after the page has finished loading — for example, from a button click — it erases the whole page and replaces it with your text. That is almost never what you want. Use it only in tiny examples, never in real code.

<script>
  document.write("Today is a good day for chai.");
</script>

innerHTML — changing part of the page

innerHTML changes the content of one element, leaving the rest of the page alone. You find the element by its id, then set its innerHTML to the new text. This is the normal way to show results: a total, a message, a list of items. The page updates instantly, with no pop-up and no reload.

document.getElementById("total").innerHTML = "Total: ₹40";

There is a close cousin called textContent, which sets plain text only. Use textContent when the result is just words or numbers, and innerHTML when you want to put HTML tags — like <b> — into the result.

console.log() — messages for the developer

console.log() writes a message to the browser's console — a hidden panel for developers. Visitors never see it. It is the best tool for checking your own work: print a value, run the page, and look in the console to see whether the value is what you expected. Press F12 in your browser to open the console.

console.log("The total is: " + 40);

Common mistakes

• Using document.write() after the page has loaded — it erases the whole page. Use innerHTML instead.
• Using alert() for every message — visitors find pop-ups annoying. Show results on the page instead.
• Forgetting the id — getElementById("total") finds nothing if no element on the page has id="total".
• Writing console.log and expecting visitors to see it — only developers with the console open can see it.

Remember

• alert() — a pop-up box. Good for urgent warnings, bad for everyday messages.
• document.write() — only while the page is loading. Never after.
• innerHTML — changes one part of the page. The normal way to show results.
• console.log() — a message for the developer, visible in the browser console (F12).

Example explained

• alert("Welcome to My Chai Shop!") — when the "Alert" button is clicked, a pop-up box appears with the welcome message. The page waits until OK is clicked.
• document.getElementById("result").innerHTML = ... — when the "Show on page" button is clicked, the paragraph with id="result" changes to show the bill total, and the rest of the page stays exactly as it was.
• console.log("Bill total is ₹40") — when the "Log it" button is clicked, the total is written to the browser console. Nothing changes on the page; press F12 to see it.
• 2 * 20 — the bill is 2 cups at ₹20 each. JavaScript does the maths first, then shows the answer — the buttons never contain a hard-coded total.
• document.write("Welcome!") in the script at the bottom — this line runs while the page is loading, so it writes its text into the page safely. It is shown here so you can see it work; in real code you would use innerHTML instead.