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:
JS
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; }
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>
Advertisement
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); }); });
Output
(4) ["3", "43", "43", "23"] 0: "3" 1: "43" 2: "43" 3: "23" length: 4 __proto__: Array(0)