Question

我试图为价格过滤器获取两个input的值，所以我先得到最小值，然后是最大值，然后使用箭头功能来获取对象。

html代码

<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>

实际otuput是NaN，

我找到了解决方案，因为我有重复的HTML ID，我在移动设备上使用了相同的ID。

Answer 1

如果您的代码正是您将其包含在问题中的方式，则可能会出现语法错误。首先，您需要删除导致这些错误的错误空白。另外，您应该使用input属性而不是value属性来访问innerText元素的值。

修复这些项目，似乎可行：

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

您的代码段有很多语法错误；我修复了它们，但是obj是未定义的：我不知道您想用这种方法实现什么

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

键入错误，例如按钮名称，输入元素ID使用空格：|。

但是我已经尝试修复您的代码，这是一个有效的代码段

  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

一切正常，不知道问题出在哪里

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

使用.value属性而不是内部文本。

<!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>

无法获取Javascript中的输入值

4 个答案:

一切正常，不知道问题出在哪里