Platform under construction

JavaScript Basics

Basic

JavaScript Output

JavaScript output means making a result visible: in the page, in the console, in a dialog or in generated markup, each with different risks and uses.

const result = document.querySelector("[data-result]");
const total = 5 * 12;

result.textContent = `Total: ${total} credits`;

JavaScript Basics

Output is how JavaScript shows that something happened.

When JavaScript calculates, receives data or reacts to input, the result has to go somewhere. During learning that might be the console. In a real interface it is usually the DOM.

The safest default for writing text into a page is textContent. It treats the value as text. innerHTML parses the value as HTML and can become dangerous with untrusted input.

Older tutorials often show document.write. Learn what it is, but avoid it in real projects. It can overwrite the document and does not match modern application structure.

textContent

Safely writes plain text into an element. Best default for user-visible text.

innerHTML

Parses HTML. Useful only when you fully control the markup and sanitize input when needed.

console.log

Writes developer output to DevTools. Great for debugging, not for users.

alert

Shows a blocking browser dialog. Useful for quick tests, poor for polished interfaces.

Examples

Good JavaScript is clear, scoped and easy to debug.

Safe visible output

<p data-price-output></p>

<script>
const output = document.querySelector("[data-price-output]");
const itemPrice = 12;
const itemCount = 5;

output.textContent = `Cart estimate: ${itemPrice * itemCount} credits`;
</script>

Unsafe or outdated output

const name = userInput.value;

// Risky when the value can contain HTML.
message.innerHTML = `<strong>Hello ${name}</strong>`;

// Old demo pattern, not production UI.
document.write("Hello world");

Rules that matter

Learn the decision before memorizing the keyword.

JavaScript becomes much easier when you understand why a pattern exists. The syntax is only the surface; the real skill is choosing the right behavior for the interface.

Choose the audience

Use the console for developers and the DOM for users.

Prefer textContent for text

It is safe, simple and clear.

Treat innerHTML carefully

Only use it when you intentionally create markup and understand the input source.

Avoid document.write

It belongs in old demos, not modern production pages.

Do not rely on alert

Blocking dialogs interrupt the user and cannot be styled.

Show errors clearly

Output should also handle empty, loading and error states.

Production thinking

JavaScript quality is visible in behavior, reliability and trust.

Why does this matter?

Output is where logic becomes experience. A calculation that never reaches the interface is invisible, and unsafe output can create serious security problems.

Accessibility

Dynamic output should be readable by assistive technology when important. For live status updates, use clear text and consider aria-live in later lessons.

Production note

Production output needs empty states, error states, escaping, formatting and testing with long text.

SEO note

Critical content should preferably exist in HTML or be rendered reliably. Do not hide all meaningful text behind fragile output code.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Change the item price from 12 to another number.
Write the result into the heading instead of the paragraph.
Try replacing textContent with innerHTML and explain why that is not always safe.

Practice assignment

Do this before moving to the next topic.

Make a small calculator with one input and one output paragraph.
Use Number() before doing math with input values.
Show a friendly message if the input is empty.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand JavaScript Output.