how can you access the inner content of a text input field?

June 27, 2026

You access the inner content of a text input field using its value property, not innerHTML or innerText.

Quick answer

In plain JavaScript:

html

<input type="text" id="myInput" />

<script>
  const input = document.getElementById('myInput');
  const text = input.value; // this is the inner content
  console.log(text);
</script>

Here, input.value returns the current text the user has typed into the field.

Why `.value` and not `innerHTML`?

A text <input> is a void element , which means it does not have inner HTML content between opening and closing tags.

Instead, its current text lives in the value attribute , which is exposed in JavaScript as the value property.

So these do not work for getting what the user typed:

js

input.innerHTML      // always empty or undefined for text inputs
input.innerText      // not for <input> text content

The correct way is always:

js

input.value;

Getting the value in different scenarios

1. On button click

html

<input type="text" id="username" placeholder="Type your name" />
<button id="show">Show value</button>

<script>
  document.getElementById('show').addEventListener('click', function () {
    const value = document.getElementById('username').value;
    alert('You typed: ' + value);
  });
</script>

This pattern—select element, read .value—is the standard way shown in many tutorials and examples.

2. While the user is typing (live)

html

<input type="text" id="liveInput" placeholder="Start typing..." />

<script>
  const field = document.getElementById('liveInput');

  field.addEventListener('input', function () {
    const currentText = this.value;
    console.log(currentText);
  });
</script>

Using the input event lets you react to every change in the field’s content.

Alternative selectors

You don’t have to use getElementById; you can also use querySelector:

js

const value = document.querySelector('#myInput').value;

The key point is: however you select the element, you always access the inner content via .value.

TL;DR
For a text input field in HTML, “inner content” is accessed with element.value in JavaScript, because the text is stored in the input’s value attribute, not as inner HTML.

Meta description (SEO):
Learn how to access the inner content of a text input field in HTML using JavaScript. Understand why value is used instead of innerHTML, with simple, up-to-date code examples.

Information gathered from public forums or data available on the internet and portrayed here.