Can't get the input value in Javascript

Question

I'm trying to get the value of two input for a price filter, so I get the min value then the max value and then use arrow function to get the objects.

html code

<div class="filters__mobile_all" style="display: none">
        <h4 class="price">Precio</h4>
        <div class="filter-price">
            <input class="input_price-min" id="input_price- 
            minList" type="value" placeholder="Mínimo">
            <input class="input_price-max" id="input_price- 
              maxList" type="value" placeholder="Máximo">
            <button class="establish-button" id="establishList">Establecer</button>
        </div>
    </div>


<div class="filter-price">
  <input class="input_price-min input_price-minList" id="input_price-minList" type="value" placeholder="Mínimo">
  <input class="input_price-max input_price-maxList" id="input_price-maxList" type="value" placeholder="Máximo">
  <button class="establish-button" id="establishList1">Establecer</button>
</div>

 <script> 
  var btnEstablecer = document.getElementById("establishList1");
  btnEstablecer.addEventListener("click", function() {
      let minPric = parseInt(document.getElementById("input_price- 
            minList ").value);

            let maxPric = parseInt(document.getElementById("input_price- 
              maxList ").value);                  
            });
 </script>

The actual otuput is NaN ,

I found the solution, it was I have duplicate Html Id, I was using the same Id for mobile.

Answer 1

If your code is exactly how you included it in your question, you have some syntax errors. First, you need to remove the erroneous whitespace causing those errors. Also, you should be accessing the value of an input element by using its value property, not innerText .

Fixing those items, this seems to work:

 var btnEstablecer = document.getElementById("establishList"); btnEstablecer.addEventListener("click", function() { let minPric = parseInt(document.getElementById("input_price-minList").value); let maxPric = parseInt(document.getElementById("input_price-maxList").value); console.log(minPric, maxPric); });

 <div class="filter-price"> <input class="input_price-min" id="input_price-minList" type="value" placeholder="Min"> <input class="input_price-max" id="input_price-maxList" type="value" placeholder="Max"> <button class="establish-button" id="establishList">Submit</button> </div>

Answer 2

Your code snippet has many syntax errors; I fixed them but obj is undefined: I don't know what you want to achieve with this like

  obj.map(obj => obj.Precio_cop > minPric && obj.Precio_cop < maxPric ?
    elementosFilter.push(obj) : "");

Type errors like button name, input element ID is using space :|.

But I've try to fix your code and this is a working code snippet

 var btnEstablecer = document.getElementById("establishList"); btnEstablecer.addEventListener("click", function(){ let minPric = parseInt(document.getElementById("input_price-minList").value); let maxPric = parseInt(document.getElementById("input_price-maxList").value); console.log("Min price :" + minPric +" max price :"+ maxPric); });

 <div class="filter-price"> <input class="input_price-min" id="input_price-minList" type="value" placeholder="Mínimo"> <input class="input_price-max" id="input_price-maxList" type="value" placeholder="Máximo"> <button class="establish-button" id="establishList">Establecer</button> </div>

Answer 3

It works fine don't know what the problem is

 var btnEstablecer = document.getElementById("establishList"); btnEstablecer.addEventListener("click", function() { let minPric = parseInt(document.getElementById("input_price-minList").value); let maxPric = parseInt(document.getElementById("input_price-maxList").value); console.log(minPric, maxPric); });

 <div class="filter-price"> <input class="input_price-min" id="input_price-minList" type="value" placeholder="Min"> <input class="input_price-max" id="input_price-maxList" type="value" placeholder="Max"> <button class="establish-button" id="establishList">Submit</button> </div>

Answer 4

use .value property not innertext.

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div class="filter-price"> <input class="input_price-min" id="input_price-minList" type="number" placeholder="Mínimo" /> <input class="input_price-max" id="input_price-maxList" type="number" placeholder="Máximo" /> <button class="establish-button" id="establishList">Establecer</button> </div> <script> let btnEstablecer = document.getElementById('establishList'); btnEstablecer.addEventListener('click', function() { let minPric = parseInt( document.getElementById('input_price-minList').value ); let maxPric = parseInt( document.getElementById('input_price-maxList').value ); console.log(minPric, maxPric); }); </script> </body> </html>