A useful interface does not need to be complicated. Start with native HTML, then add JavaScript only when you need it.
What You Need to Know
If a component needs to remember a visitor's choice, the state should have a clear owner. A native input's value is a good starting point; recreating DOM nodes without saving state can discard someone's work.
Try the Example
Take a look at the example. We’ll explain the important lines right below it.
<label for="quantity">Quantity</label>
<input id="quantity" type="number" name="quantity" min="1" value="2">
<button id="double" type="button">Double quantity</button>
<script>
const quantityInput = document.querySelector("#quantity");
document.querySelector("#double").addEventListener("click", () => {
quantityInput.value = String(Number(quantityInput.value) * 2);
});
</script>Let’s Read the Code
- <label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
- <input>: The input is a control. Its type changes the way people enter information.
- for: For connects a label or output with a control by ID.
- id: An id uniquely identifies an element on this page.
What the example shows: State should live in a predictable place. Here the input value holds the quantity and the button updates it.
What Happens in the Browser?
When this example includes JavaScript, it supplies behavior that ordinary HTML does not automatically provide. Always think about a fallback.
What makes it interactive? Look for the JavaScript that finds an element and reacts to an event. HTML provides the initial controls and content; the script updates the page. Try removing the script to see which part still works natively.
Your Turn
Type 3 and press the button twice; observe how the input value changes without replacing its element.
Common Beginner Mistakes
- Assuming new HTML syntax works in every browser without testing.
- Replacing the whole form with innerHTML can discard focus, typed values, and event listeners.
Key Takeaways
- If a component needs to remember a visitor's choice, the state should have a clear owner.
- <label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
- Test the behavior you expect rather than trusting how the snippet looks in your editor.