Tips for extracting the values of multiple input fields in JavaScript and displaying them on a webpage

Question

Tips for extracting the values of multiple input fields in JavaScript and displaying them on a webpage

I want to collect all the values from input fields and display them on the website.

Check out my code snippet below:

var button = document.querySelector("button");
button.addEventListener("click", function() {

  var inputs = document.querySelectorAll("input").value;
  for (i = 0; i < inputs.length; i++) {
    inputs[i];
  }

  var output = document.getElementById("output");
  output.innerHTML = "Here are the values: " + inputs;
});

<div>
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
</div>


<button>Check</button>
<div id="output"></div>

javascript arrays for-loop input onclick

Answer 1

Answer №1

When you use the expression

document.querySelectorAll("input").value;

, it does not give you the concatenated values of all selected inputs.

Instead, you can create a new variable and append the values to it inside a for loop like this:

inputsAppended += inputs[i].value;

Then, you can display the combined value using:

output.innerHTML = "Combined Value: " + inputsAppended;

var button = document.querySelector("button");
button.addEventListener("click", function() {
  var inputsAppended = "";
  var inputs = document.querySelectorAll("input");
  for (i = 0; i < inputs.length; i++) {
    inputsAppended += inputs[i].value;
  }

  var output = document.getElementById("output");
  output.innerHTML = "Combined Value: " + inputsAppended;
});

<div>
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
</div>


<button>Check</button>
<div id="output"></div>

Answer 2

When you use the expression

document.querySelectorAll("input").value;

, it does not give you the concatenated values of all selected inputs.

Instead, you can create a new variable and append the values to it inside a for loop like this:

inputsAppended += inputs[i].value;

Then, you can display the combined value using:

output.innerHTML = "Combined Value: " + inputsAppended;

var button = document.querySelector("button");
button.addEventListener("click", function() {
  var inputsAppended = "";
  var inputs = document.querySelectorAll("input");
  for (i = 0; i < inputs.length; i++) {
    inputsAppended += inputs[i].value;
  }

  var output = document.getElementById("output");
  output.innerHTML = "Combined Value: " + inputsAppended;
});

<div>
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
</div>


<button>Check</button>
<div id="output"></div>

Answer 3

Answer №2

let submitButton = document.querySelector("button");
submitButton.addEventListener("click", function() {

  let numberInputs = document.querySelectorAll("input");
  for (i = 0; i < numberInputs.length; i++) {
  let result = document.getElementById("result");
  
  result.innerHTML += numberInputs[i].value;
  }

  
});

<div>
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="50">
</div>


<button>Submit</button>
<div id="result"></div>

Answer 4

let submitButton = document.querySelector("button");
submitButton.addEventListener("click", function() {

  let numberInputs = document.querySelectorAll("input");
  for (i = 0; i < numberInputs.length; i++) {
  let result = document.getElementById("result");
  
  result.innerHTML += numberInputs[i].value;
  }

  
});

<div>
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="50">
</div>


<button>Submit</button>
<div id="result"></div>

Answer 5

Answer №3

This method provides a straightforward way to display each number on a separate line:

let button = document.querySelector("button");
button.addEventListener("click", function() {
  // Loop through all input fields, gather their values, and concatenate them with line breaks
  document.getElementById("output").innerHTML =
 [].slice.call(document.querySelectorAll("input")).map( input => input.value ).join( "<br>" );
});

<div>
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
</div>


<button>Check</button>
<div id="output"></div>

Answer 6

This method provides a straightforward way to display each number on a separate line:

let button = document.querySelector("button");
button.addEventListener("click", function() {
  // Loop through all input fields, gather their values, and concatenate them with line breaks
  document.getElementById("output").innerHTML =
 [].slice.call(document.querySelectorAll("input")).map( input => input.value ).join( "<br>" );
});

<div>
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
  <input type="number" min="1" max="49">
</div>


<button>Check</button>
<div id="output"></div>

Tips for extracting the values of multiple input fields in JavaScript and displaying them on a webpage

Answer №1

Answer №2

Answer №3

Similar questions

The onbeforeunload event is activated in the parent page when it is specified in the child page

The code is running just fine when tested locally, but it seems to encounter an issue when accessed remotely, yielding

How can one pass req.validationErrors() from the backend to the frontend with Express Validator?

The process of passing parameter values by function in useEffect

Angular ng-show does not seem to evaluate properly

Issue: Module '@angular/compiler' not found

Having difficulty passing a function as a parameter from a NextJS component

Incorporating Javascript .click() with Python Selenium Webdriver for Enhanced Script Functionality

Struggling to get the knockout js remove function to function properly within a nested table structure

How to create a continuous loop for a JavaScript carousel

What could be causing my file input to appear misaligned?

Update various components within a container

Retrieve childNodes of the Select All input using jQuery from the container node with the class name "container"

The Typescript Decorator is triggered two times

Show the helper text when a TextField is selected in Material UI

Fade out the div element when clicked

Customize Bottom Navigation Bar in React Navigation based on User Roles

Encapsulating the React Material-ui Datepicker and Timepicker OnChange event callback functionging

Exploring the relationship between React component inheritance and asynchronous requests

Getting values from a JSON array in Swift 4 - a step-by-step guide