Loading...

JavaScript Output

You can now put a script on a page. The next skill is showing a result: on the page for visitors, in a dialog they must dismiss, or only in the Console for you. Same language — four very different destinations.

How do you show JavaScript results to a user or a developer?

For visitors, update an existing element — textContent for plain text, innerHTML only when you must insert markup. For a blocking message, call window.alert. For your own debugging, use console.log. Treat document.write as a legacy stream: fine while the parser is still reading the file, dangerous after the page has loaded because it can replace the whole document.

Four destinations at a glance

📊 Where a JavaScript result can appear

Method Who sees it Beginner default
textContent on an element Visitors, in the page Yes — everyday visible output
innerHTML on an element Visitors, including HTML tags Only when you need markup you control
window.alert Visitors, in a modal dialog Rare — it stops the page until OK
console.log You, in DevTools Console Yes for debugging; visitors never see it
document.write The HTML stream Avoid after load; skip as a habit

Output on the page (visitor default)

Keep a real heading or paragraph in HTML. After the script runs (end of body, as in the previous session), change that node. Visitors see the new text without opening DevTools.

Visible text with textContent

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — Page</title>
</head>
<body>
<h1 id="msg">Waiting…</h1>
<script>
document.getElementById("msg").textContent =
"Hello from JavaScript";
</script>
</body>
</html>

Why textContent first

  • The original “Waiting…” is still in HTML if the script fails
  • Quotes and < in the string stay text, not tags
  • You already used this pattern when you placed scripts at the end of body
  • Later lessons (DOM module) go deeper; this session only needs “put the result here”

innerHTML — when the result is markup

innerHTML parses a string as HTML. Use it when you intentionally add tags you wrote. Do not dump raw user input into innerHTML — that can run unwanted markup. For a name or a price, stay with textContent.

Inserting markup with innerHTML

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — innerHTML</title>
</head>
<body>
<p id="box">Empty</p>
<script>
document.getElementById("box").innerHTML =
"<strong>Ready</strong> — markup inside the paragraph";
</script>
</body>
</html>

document.write — know it, rarely use it

document.write sends text into the HTML stream while the file is still being parsed. If you call it after the document has finished loading (for example from a late button click), many browsers open a new stream and wipe the page. Beginners should not use it for updates. Prefer changing an element instead.

document.write can wipe a loaded page

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — write</title>
</head>
<body>
<p>This paragraph exists first.</p>
<button type="button" id="wipe">Call document.write after load</button>
<script>
document.getElementById("wipe").onclick = function () {
document.write("The previous page content is gone");
};
</script>
</body>
</html>

Open that demo, click the button, and notice the original paragraph disappears. That is why this course will not use document.write for later examples.

alert — a blocking dialog

window.alert (usually written alert) pops a system dialog. The page waits until the visitor clicks OK. Useful once to prove a script ran. Poor as the only “UI”: it cannot be styled, stacks badly, and interrupts screen readers and keyboard flow. Prefer page text for real messages.

A one-time alert

html 
<!DOCTYPE html>
<html>
<head>
<title>Output — Alert</title>
</head>
<body>
<p>The page pauses until you dismiss the dialog.</p>
<script>
alert("Script ran — click OK to continue");
</script>
</body>
</html>

console.log — for you, not the visitor

The Console is a developer tool. console.log prints values there. Shoppers on a phone never see it. Use it to inspect a number or a string while you learn. Do not treat a successful log as “the app showed the result.”

Developer-only log

javascript 
console.log("Visible in DevTools, not on the page");
console.log(2 + 2);

Open DevTools (often F12), choose the Console tab, refresh, and read the lines. If you only change console.log and the heading stays “Waiting…”, visitors still see “Waiting…”.

Try it yourself

  1. Save the textContent page, open it, then change the string and refresh.
  2. Switch that line to innerHTML with a <strong> tag and confirm the word looks bold.
  3. Open the Console and run the console.log example — confirm nothing new appeared in the page body.
  4. Run the alert example once; then replace alert with a heading update so the page does not block.
  5. Optional: run the document.write button demo so you feel the wipe — then delete that pattern from your own files.

Common mistakes

  • Showing results only with console.log, then wondering why users see an empty page
  • Filling innerHTML with text you did not write (forms, URLs, chat) instead of textContent
  • Calling document.write after the page loaded and losing the whole layout
  • Spamming alert on every keystroke
  • Mixing this session with Where To: placement is where the script lives; output is where the result appears

Summary

  • Visitor-visible default: update an element with textContent
  • innerHTML inserts markup you control — not untrusted strings
  • alert blocks the page; use it sparingly
  • console.log is for developers in DevTools
  • Skip document.write after load; it can erase the document
  • Practice by moving the same message from Console → alert → heading

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
6
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 3 of 4
Javascript Tutorial