Skip to content

Talking to the Page

console.log() prints to the console — only you can see it, not the user. To actually change what appears on the page, JavaScript needs to reach into the HTML, read from it, and write to it.

This is where things get interesting.

Giving elements an id

To reach a specific element, give it an id:

<p id="message">Nothing here yet.</p>

Now JavaScript can find it by that id — the way you find a variable by its name.

Finding an element — document.getElementById()

let box = document.getElementById("message")

document is the whole page. getElementById("message") searches the page for the element with id="message" and gives it back as a variable. Now box holds that element and you can do things with it.

Changing what it shows — .innerText

box.innerText = "Hello from JavaScript!"

Run this and the paragraph on the page changes — not in the console, on the actual visible page. The user sees it.

Try the full thing:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test</title>
  </head>
  <body>

    <p id="message">Nothing here yet.</p>

    <script>
      let box = document.getElementById("message")
      box.innerText = "Hello from JavaScript!"
    </script>

  </body>
</html>

Open this. The paragraph shows "Hello from JavaScript!" — never "Nothing here yet." because the script runs the moment the page loads and changes it immediately.

Reading from an input — .value

<input type="text" id="name-input" placeholder="Type your name">

let input = document.getElementById("name-input")
let name = input.value

.value gives you whatever the user typed into the input, as a string. This is how you read user input without a form submission.

Reacting to a button click — onclick

onclick is an HTML attribute. You put it on a button and tell it which JavaScript function to call when clicked:

<button onclick="greet()">Say Hello</button>

When the user clicks the button, the browser calls greet(). You define that function in your <script> tag.

Putting it all together

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Greeting</title>
  </head>
  <body>

    <input type="text" id="name-input" placeholder="Type your name">
    <button onclick="greet()">Say Hello</button>

    <p id="message"></p>

    <script>
      function greet() {
        // get the input element, then read what the user typed
        let nameInput = document.getElementById("name-input")
        let name = nameInput.value

        // get the paragraph element, then update its text
        let messageBox = document.getElementById("message")
        messageBox.innerText = "Hello, " + name + "!"
      }
    </script>

  </body>
</html>

Walk through what happens when the user clicks the button:

  1. The browser calls greet()
  2. greet() reads the value from the input
  3. It builds the string "Hello, Alice!"
  4. It puts that string into the <p> — the paragraph updates on the page

No page reload. No Flask. No Python. Just JavaScript reacting to a click, reading an input, and updating the page.

Challenge

Add a second input and a second button to the page. The second button should read whatever is in its input and display a different message in a different paragraph.

Then try this: what happens if the user clicks the button without typing anything? What does name contain? What does the message say? Think about how you could handle that.

← What is JavaScript?    Next: Building a Calculator →