JavaScript Tutorial
JavaScript Project: Greeting
Read a name from an input and write a welcome line onto the page.
What you will build
A small greeting form. The visitor types a name, clicks a button, and the page writes a welcome line under the controls. Empty input gets a short message instead of a blank welcome.
HTML holds the field, the button, and the output paragraph. JavaScript reads the field, checks it, and sets textContent. CSS is only there so the live preview looks like a finished card.
Open an example with Try it in JavaScript. That loads /javascript/try — a live page and a console.
Methods you will use
| Method | Job on this page |
|---|---|
input / .value | Holds the name the visitor typed |
textContent | Writes the welcome line onto the paragraph |
click | Runs the script when the button is pressed |
trim | Strips spaces so a blank field is treated as empty |
getElementById | Finds the field, the button, and the message |
Use textContent, not innerHTML. The name is data from the visitor. Text content cannot inject tags. Inner HTML can.
Build in slices
Start with the markup. Give every control an id you can look up. Put a real labelon the field. Keep a placeholder line in the paragraph so the page is not empty before the first click.
Example
<label for="name">Your name</label>
<input id="name" type="text" autocomplete="name">
<button id="greet" type="button">Greet</button>
<p id="message">Type a name, then greet.</p>Next wire the click. Read value, trim it, and branch. An empty string is not a name.
Example
const input = document.getElementById("name");
const button = document.getElementById("greet");
const message = document.getElementById("message");
button.addEventListener("click", function () {
const name = input.value.trim();
if (!name) {
message.textContent = "Enter a name first.";
return;
}
message.textContent = "Welcome, " + name + ".";
});Put both pieces on one fragment so you can click the button in the preview. The script must sit after the markup, or getElementById returns null.
Example
<label for="name">Your name</label>
<input id="name" type="text" autocomplete="name">
<button id="greet" type="button">Greet</button>
<p id="message">Type a name, then greet.</p>
<script>
const input = document.getElementById("name");
const button = document.getElementById("greet");
const message = document.getElementById("message");
button.addEventListener("click", function () {
const name = input.value.trim();
if (!name) {
message.textContent = "Enter a name first.";
return;
}
message.textContent = "Welcome, " + name + ".";
});
</script>Paste each slice into /javascript/try as you go. ClickTry it in JavaScript under the example. Fix the ids before you restyle the card.
Complete document
This file is the greeting you would keep. The stylesheet is local: a yellow studio background, a centered card, and a message line that stays readable after the click.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Greeting</title>
<style>
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #fefce8;
font-family: "Segoe UI", system-ui, sans-serif;
color: #1c1917;
}
.card {
width: min(22rem, 92vw);
background: #fffbeb;
border: 1px solid #fde68a;
padding: 1.4rem 1.5rem 1.5rem;
}
h1 {
margin: 0 0 0.35rem;
font-size: 1.45rem;
}
.lead {
margin: 0 0 1rem;
color: #78716c;
}
label {
display: block;
font-weight: 700;
margin-bottom: 0.35rem;
}
input {
width: 100%;
box-sizing: border-box;
padding: 0.5rem 0.6rem;
border: 1px solid #d6d3d1;
margin-bottom: 0.75rem;
font: inherit;
}
button {
padding: 0.5rem 0.9rem;
border: 0;
background: #854d0e;
color: #fffbeb;
font: inherit;
font-weight: 700;
cursor: pointer;
}
#message {
margin: 1rem 0 0;
min-height: 1.4rem;
}
</style>
</head>
<body>
<article class="card">
<h1>Greeting</h1>
<p class="lead">Type a name. The page writes the welcome line.</p>
<label for="name">Your name</label>
<input id="name" type="text" autocomplete="name">
<button id="greet" type="button">Greet</button>
<p id="message">Type a name, then greet.</p>
</article>
<script>
const input = document.getElementById("name");
const button = document.getElementById("greet");
const message = document.getElementById("message");
button.addEventListener("click", function () {
const name = input.value.trim();
if (!name) {
message.textContent = "Enter a name first.";
return;
}
message.textContent = "Welcome, " + name + ".";
});
input.addEventListener("keydown", function (event) {
if (event.key === "Enter") button.click();
});
</script>
</body>
</html>How the script talks to the page
The click handler closes over three elements. It does not search the document again. If the ids are wrong, those constants are null and the first .value throws.
Concatenation with + is enough for one name. Template strings also work. Either way, keep the period and the comma in the sentence so the line reads as English, not as a debug dump.
Common mistakes
- Putting the script in the
headwithout waiting for the DOM. The elements do not exist yet. - Using
innerHTMLfor the welcome line. A name is text. Treat it as text. - Forgetting
type="button"inside a form. The page would submit and reload instead of greeting. - Reading
textContentfrom the input. Inputs store the typed value invalue. - Skipping
trim. A field of spaces looks filled and still has no name.
Practice tasks
- Change the sentence to include the time of day: morning, afternoon, or evening, based on
new Date().getHours(). - Disable the button until the field has at least one non-space character. Re-enable it on input.
- Add a Clear button that empties the field and restores the original message. Preview at /javascript/try.