猿问

无法在 Javascript 中获取输入值

我正在尝试input为价格过滤器获取 2 的值，因此我先获取最小值，然后获取最大值，然后使用箭头函数获取对象。


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>

实际的输出是NaN，


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


犯罪嫌疑人X
浏览 212回答 3
3回答

UYOU

如果您的代码正是您在问题中包含它的方式，那么您就有了一些语法错误。首先，您需要删除导致这些错误的错误空格。此外，您应该input使用其value属性访问元素的值，而不是innerText.修复这些项目，这似乎有效：var btnEstablecer = document.getElementById("establishList");btnEstablecer.addEventListener("click", function() {&nbsp; let minPric = parseInt(document.getElementById("input_price-minList").value);&nbsp; let maxPric = parseInt(document.getElementById("input_price-maxList").value);&nbsp; console.log(minPric, maxPric);});<div class="filter-price">&nbsp; <input class="input_price-min" id="input_price-minList" type="value" placeholder="Min">&nbsp; <input class="input_price-max" id="input_price-maxList" type="value" placeholder="Max">&nbsp; <button class="establish-button" id="establishList">Submit</button></div>
0

慕婉清6462132

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

凤凰求蛊

你的代码片段有很多语法错误；我修复了它们但obj未定义：我不知道你想用这个实现什么&nbsp; obj.map(obj => obj.Precio_cop > minPric && obj.Precio_cop < maxPric ?&nbsp; &nbsp; elementosFilter.push(obj) : "");键入错误，如按钮名称、输入元素 ID 使用空格 :|。但我已经尝试修复您的代码，这是一个有效的代码片段&nbsp; var btnEstablecer = document.getElementById("establishList");&nbsp;&nbsp;&nbsp; &nbsp;btnEstablecer.addEventListener("click", function(){&nbsp;&nbsp;&nbsp; &nbsp;let minPric = parseInt(document.getElementById("input_price-minList").value);&nbsp; &nbsp;let maxPric = parseInt(document.getElementById("input_price-maxList").value);&nbsp;&nbsp;&nbsp; &nbsp; console.log("Min price :" + minPric +" max price :"+ maxPric);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;});<div class="filter-price">&nbsp; &nbsp; &nbsp; &nbsp;<input class="input_price-min" id="input_price-minList" type="value" placeholder="Mínimo">&nbsp; &nbsp; &nbsp; &nbsp;<input class="input_price-max" id="input_price-maxList" type="value" placeholder="Máximo">&nbsp; &nbsp; &nbsp; &nbsp;<button class="establish-button" id="establishList">Establecer</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</div>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答