How to Display User Input on-Screen and Save as a Variable for Other Parts of the Webpage

• `` for text fields
• `` for checkboxes
• `` for radio buttons
• `` for text areas
• `` for dropdown menus

These input elements have attributes like `id` and `name`, which help us identify and target them using JavaScript.

Method 1: Using JavaScript and the `InputElement` Object

In this method, we’ll use JavaScript to capture user input and store it in a variable. We’ll target the input element using its `id` attribute and access its value using the `value` property.

// Get the input element
const userInput = document.getElementById('myInput');

// Add an event listener to capture the input value
userInput.addEventListener('input', () => {
  // Store the input value in a variable
  const inputValue = userInput.value;
  console.log(inputValue);
});

In this example, we get the input element with the `id` “myInput” using `document.getElementById`. We then add an event listener to capture the input value whenever the user types or changes the input. The `inputValue` variable stores the current value of the input element, which we log to the console.

Displaying User Input On-Screen

To display the user input on-screen, we can create a `

` element and update its innerHTML with the input value.

// Create a paragraph element to display the input value
const displayInput = document.createElement('p');
document.body.appendChild(displayInput);

// Update the paragraph element with the input value
userInput.addEventListener('input', () => {
  const inputValue = userInput.value;
  displayInput.innerHTML = `You entered: ${inputValue}`;
});

In this example, we create a new `

` element and add it to the webpage using `document.body.appendChild`. We then update the paragraph element’s innerHTML with the input value using the `innerHTML` property.

Method 2: Using HTML5 `dataset` Attribute

In this method, we’ll use the HTML5 `dataset` attribute to store user input as a custom data attribute. We’ll then access this attribute using JavaScript.

// Create an input element with a dataset attribute
const userInput = document.createElement('input');
userInput.dataset.inputValue = '';
document.body.appendChild(userInput);

// Add an event listener to update the dataset attribute
userInput.addEventListener('input', () => {
  userInput.dataset.inputValue = userInput.value;
  console.log(userInput.dataset.inputValue);
});

In this example, we create an input element with a custom `dataset` attribute called `inputValue`. We then add an event listener to update the `inputValue` attribute with the current input value. We can access this attribute using the `dataset` property.

Displaying User Input On-Screen

To display the user input on-screen, we can access the `inputValue` attribute and update a `

` element with the value.

// Create a paragraph element to display the input value
const displayInput = document.createElement('p');
document.body.appendChild(displayInput);

// Update the paragraph element with the input value
userInput.addEventListener('input', () => {
  const inputValue = userInput.dataset.inputValue;
  displayInput.innerHTML = `You entered: ${inputValue}`;
});

In this example, we access the `inputValue` attribute using the `dataset` property and update the paragraph element with the input value.

Method 3: Using a JavaScript Library or Framework

In this method, we’ll use a JavaScript library or framework, such as jQuery or React, to capture user input and store it in a variable.

Using jQuery

// Get the input element using jQuery
const userInput = $('#myInput');

// Add an event listener to capture the input value
userInput.on('input', () => {
  const inputValue = userInput.val();
  console.log(inputValue);
});

In this example, we use jQuery to get the input element with the `id` “myInput” and add an event listener to capture the input value. We then access the input value using the `val()` method.

Using React

// Create a React component to capture user input
import React, { useState } from 'react';

function MyInput() {
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <p>You entered: {inputValue}</p>
    </div>
  );
}

In this example, we create a React component to capture user input using the `useState` hook. We then update the `inputValue` state with the current input value using the `onChange` event handler.

Conclusion

In this article, we’ve explored three methods to display user input on-screen and save it as a variable for other parts of the webpage. We’ve used HTML, CSS, and JavaScript to capture user input, store it in a variable, and display it on-screen.

Additional Resources

Here are some additional resources to help you learn more about working with user input:

We hope this article has been helpful in teaching you how to display user input on-screen and save it as a variable for other parts of the webpage. Happy coding!

Here are 5 questions and answers about “How to display user input on-screen and save as a variable for other parts of the webpage”:

Frequently Asked Question

Get answers to the most common questions about displaying user input on-screen and saving it as a variable for other parts of the webpage!