How to take multiple inputs from the user in Javascript? How to declare variable for all?

Question

I'm doing JavaScript meal nutrition calculator. It is a template with 5 rows, every each row got 4 inputs, so twenty in total, type=value. Every input got different id.

Is there any way to read all inputs at the same time without duplicating "var x = document.getElementById('x').value" 20 times?

Best,

<html>
<head>
</head>
<body>
<div>
<h1>Calculator</h1>
<div>ingredient: 
<input type="number" id="x" placeholder="x">
<input type="number" id="y" placeholder="y">
<input type="number" id="z" placeholder="z">
<input type="number" id="a" placeholder="a"></div>

<button onclick="calo()" id="cal">Go</button>
<h1>Facts</h1>  
</div>
<div id="result">Result is displayed here.</div>
</body>
</html>


function calo() {
const [x,y,z,a] = [...document.querySelectorAll('input')];
document.querySelector("pre").textContent = x.outerHTML + "\n" + y.outerHTML + "\n" + z.outerHTML + "\n" + a.outerHTML;

var calculate = x + y + z + a;

document.getElementById("result").innerHTML = calculate;}

Unmitigated · Accepted Answer · 2022-07-01 17:38:17Z

3

You can use document.querySelectorAll.

document.querySelectorAll('input')
    .forEach(input=>console.log("Id:", input.id, "Value:", input.value));

If you want the input elements declared as separate variables, you can use a destructuring assignment. Example:

const [x,y,z] = document.querySelectorAll('input');
document.querySelector("pre").textContent 
      = x.outerHTML + "\n" + y.outerHTML + "\n" + z.outerHTML;

<input type="number" id="x">
<input type="number" id="y">
<input type="number" id="z">
<pre></pre>

edited Jul 1, 2022 at 17:38

answered Jun 24, 2020 at 20:47

Unmitigated

91.4k12 gold badges102 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Pawel Over a year ago

How it will look like for "type=name", for 3 inputs: <input type="number" id="x"> <input type="number" id="y"> <input type="number" id="z"> document.querySelectorAll('input').forEach(input=>console.log("Name:", input.id, "Value:", input.value)); I tried that way, but x,y and z are not declared

Unmitigated Over a year ago

@Pawel What do you mean by not declared? document.querySelectorAll just gets a collection of all the input elements which you can loop through.

Unmitigated Over a year ago

@Pawel I have also updated my answer to provide some additional guidance.

Pawel Over a year ago

I would love to collect all 4 inputs and take action, after show result. Trying to understand how it works. Thank you for help

Unmitigated Over a year ago

@Pawel No problem. Do you still need help with anything?

|

Collectives™ on Stack Overflow

How to take multiple inputs from the user in Javascript? How to declare variable for all?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related