Updating UI Based on State — I can update the UI based on program state (show results, clear fields) at my level.

In the early days of the web, pages were completely static. A server sent an HTML file to your browser, the browser displayed it, and that was it — nothing changed unless you clicked a link to load an entirely new page. If you wanted to show a user their quiz score, the page had to reload from scratch. This was slow, clunky, and nothing like the interactive apps we use today.

The idea of updating the UI based on state — changing what users see on screen by modifying data stored in your program — is the core pattern behind every modern web application. From Instagram feeds refreshing with new posts, to a Google Form clearing after you submit it, to a shopping cart updating its total, all of these experiences rely on the same fundamental concept: your code keeps track of data (the state), and when that data changes, the code updates the visible page (the UI, or User Interface) to match.

The central question this lesson answers is straightforward: How do I use JavaScript to change what appears on a web page based on data my program is tracking? By the end, you will be able to show results to users, clear input fields, and toggle visibility — all by writing code that connects state to the DOM.

Before writing any code, you need to understand a few key ideas that make state-driven UI possible. These principles are not unique to JavaScript — they apply to nearly every programming environment that builds user interfaces.

The diagram below illustrates the complete cycle that happens every time a user interacts with your page. Follow the arrows from left to right to see how a button click travels through your code and ultimately changes what appears on screen.

Notice how the code snippets at the bottom correspond to each stage. The event listener sets up the connection between the user and your code. The state update happens inside the handler function. And the rendering step is where you push the new values into the page. This three-step pattern is remarkably consistent — whether you are building a simple counter or a complex dashboard, the cycle remains the same.

Now let's look at the specific JavaScript tools you will use most often to read state and push it into the DOM. These are not abstract concepts — they are actual methods and properties built into every web browser.

Selecting Elements

Before you can change an element, you need a reference to it. The two most common selection methods are document.getElementById("myId") and document.querySelector(".myClass"). The first finds an element by its unique id attribute; the second uses any CSS selector. Both return a DOM element object that you can store in a variable and manipulate later.

Changing Text Content

The textContent property lets you read or overwrite the text inside an element. For example, resultEl.textContent = "You scored " + score + " points!"; takes the current value of the score variable and writes a message into the element. This is the most direct way to show results to the user.

Clearing Input Fields

Input elements have a value property that corresponds to whatever the user has typed. To clear a field after the user submits, you simply set inputEl.value = "";. This resets the field to blank, giving the user a clear signal that their input was received and the form is ready for the next entry.

Showing and Hiding Elements

You can control visibility using the classList property. If you define a CSS class like .hidden { display: none; }, you can add or remove it in JavaScript: element.classList.add("hidden") hides the element, and element.classList.remove("hidden") reveals it. The method element.classList.toggle("hidden") flips between the two states automatically.

Changing Styles Directly

For quick visual feedback, you can modify inline styles via element.style.color = "green" or element.style.backgroundColor = "#fef3c7". While toggling CSS classes is generally preferred for maintainability, direct style changes work well for small, one-off updates like highlighting a correct answer.

Now that you know the individual DOM methods, let's see how they combine into recognizable patterns. The diagram below shows four common scenarios you will encounter in nearly every beginner JavaScript project. Each pattern follows the same Event → State → UI cycle but applies different DOM methods.

These four patterns cover the vast majority of what you will do in a beginner JavaScript project. Pattern A and Pattern B are by far the most common — showing a calculated result and resetting the form for the next use. Patterns C and D add polish by controlling what the user sees and how it looks. In practice, you will often combine two or three patterns in a single event handler.

Let's walk through building a simple tip calculator step by step. The user enters a bill amount and clicks a button. The program calculates a 20% tip, displays the result, and clears the input field. This example combines Patterns A and B from the previous section.

There are multiple ways to update the DOM in JavaScript. The table below compares four approaches you might encounter. As a beginner, you should focus on the first two methods (highlighted in green) because they are the safest and easiest to understand.

The pattern you learned in this lesson — manually reading state, then manually updating the DOM — is exactly how vanilla JavaScript works. But as applications grow larger, managing these updates by hand becomes tedious and error-prone. That is why developers created frameworks and libraries that automate the rendering step. Understanding the manual version first is essential because every framework is built on top of these same DOM methods.

The right column in the table above might look complex, but every single concept builds directly on what you practiced today. When you learn React, Vue, or another framework later, you will recognize the Event → State → UI cycle immediately. The framework just handles the "render" step for you, while you focus on defining state and writing logic.