How to get value from an input field from a class of input fields?

I wrote a code that contains several input fields of number type. They all have the same class and can have different values. But when I want to get a value from one of the input fields, the console log returns an undefined. Why’s that happening, and how to resolve this issue?

Code:

const overlay = document.querySelector('.overlay');
const overlayBtn = document.querySelector('.overlay-btn');
var quantity = document.querySelectorAll('.quantity');
var amtBtn = document.querySelectorAll('.amt-btn');

overlayBtn.addEventListener('click', function(){
  overlay.style.display = "block";
});

  amtBtn.forEach(function(btn){
  btn.addEventListener('click', function(e){
    e.preventDefault();
    getQuantity = quantity.value;
    console.log(getQuantity);
});
});

JavaScript
​x
 
const overlay = document.querySelector('.overlay');
const overlayBtn = document.querySelector('.overlay-btn');
var quantity = document.querySelectorAll('.quantity');
var amtBtn = document.querySelectorAll('.amt-btn');
​
overlayBtn.addEventListener('click', function(){
  overlay.style.display = "block";
});
​
  amtBtn.forEach(function(btn){
  btn.addEventListener('click', function(e){
    e.preventDefault();
    getQuantity = quantity.value;
    console.log(getQuantity);
});
});
​

CSS

.overlay-btn{
  padding: 50px;
}

.overlay{
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer; 
  display: none;
}

.showOverlay{
  display: block;
}

.form-amount{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #2C8F77;
  visibility: visible;
}

JavaScript
 
.overlay-btn{
  padding: 50px;
}
​
.overlay{
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); 
  z-index: 2; 
  cursor: pointer; 
  display: none;
}
​
.showOverlay{
  display: block;
}
​
.form-amount{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #2C8F77;
  visibility: visible;
}
​

HTML

 <body>
            
            <button class="overlay-btn">add to list</button>

            <div class="overlay">
              <div class="amountPopUp">
                
                <form class="form-amount">
                  <label for="quantity">Quantity:</label>
                  <input type="number" class="quantity" name="quantity" min="1" max="100">
                  <input type="submit" class="amt-btn" value="Enter" name="quantity">
                  <input type="number" class="quantity" name="quantity" min="1" max="100">
                  <input type="submit" class="amt-btn" value="Enter" name="quantity">
                  <input type="number" class="quantity" name="quantity" min="1" max="100">
                  <input type="submit" class="amt-btn" value="Enter" name="quantity">
                  <input type="number" class="quantity" name="quantity" min="1" max="100">
                  <input type="submit" class="amt-btn" value="Enter" name="quantity">
                </form>
              </div>
            </div>
  </body>

JavaScript
 
 <body>
            
            <button class="overlay-btn">add to list</button>
​
            <div class="overlay">
              <div class="amountPopUp">
                
                <form class="form-amount">
                  <label for="quantity">Quantity:</label>
                  <input type="number" class="quantity" name="quantity" min="1" max="100">
                  <input type="submit" class="amt-btn" value="Enter" name="quantity">
                  <input type="number" class="quantity" name="quantity" min="1" max="100">
                  <input type="submit" class="amt-btn" value="Enter" name="quantity">
                  <input type="number" class="quantity" name="quantity" min="1" max="100">
                  <input type="submit" class="amt-btn" value="Enter" name="quantity">
                  <input type="number" class="quantity" name="quantity" min="1" max="100">
                  <input type="submit" class="amt-btn" value="Enter" name="quantity">
                </form>
              </div>
            </div>
  </body>
​

Answer

var quantity = document.querySelectorAll('.quantity'); is not contain a single value. so you cannot change the value using .value it is like an array so you have to us indexing.

const overlay = document.querySelector('.overlay');
const overlayBtn = document.querySelector('.overlay-btn');
var quantity = document.querySelectorAll('.quantity');
var amtBtn = document.querySelectorAll('.amt-btn');

let getQuantity = []; // updated
overlayBtn.addEventListener('click', function(){
  overlay.style.display = "block";
});

amtBtn.forEach(function(btn){
  btn.addEventListener('click', function(e){
    e.preventDefault();

    // updated
    for(let i = 0;i<quantity.length;i++ ){
          getQuantity.push(quantity[i].value);
    }

    console.log(getQuantity);
});
});

JavaScript
 
const overlay = document.querySelector('.overlay');
const overlayBtn = document.querySelector('.overlay-btn');
var quantity = document.querySelectorAll('.quantity');
var amtBtn = document.querySelectorAll('.amt-btn');
​
let getQuantity = []; // updated
overlayBtn.addEventListener('click', function(){
  overlay.style.display = "block";
});
​
amtBtn.forEach(function(btn){
  btn.addEventListener('click', function(e){
    e.preventDefault();
​
    // updated
    for(let i = 0;i<quantity.length;i++ ){
          getQuantity.push(quantity[i].value);
    }
​
    console.log(getQuantity);
});
});
​

Output

(4) ["3", "43", "43", "23"]
0: "3"
1: "43"
2: "43"
3: "23"
length: 4
__proto__: Array(0)

JavaScript
 
(4) ["3", "43", "43", "23"]
0: "3"
1: "43"
2: "43"
3: "23"
length: 4
__proto__: Array(0)
​

Advertisement

Answer