[英]Can't get the input value in Javascript
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.我正在尝试获取价格过滤器的两个
input
的值,因此我先获取最小值,然后获取最大值,然后使用箭头函数获取对象。
html code 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>
The actual otuput is NaN
,实际输出是
NaN
,
I found the solution, it was I have duplicate Html Id, I was using the same Id for mobile.我找到了解决方案,因为我有重复的 Html Id,我在移动设备上使用了相同的 Id。
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
.此外,您应该使用其
value
属性而不是innerText
访问input
元素的value
。
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>
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
未定义:我不知道你想用这个实现什么
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 :|.键入错误,如按钮名称、输入元素 ID 使用空格 :|。
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>
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>
use .value property not innertext.使用 .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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.