无法在 Javascript 中获取输入值
[英]Can't get the input value in Javascript
问题描述
我正在尝试获取价格过滤器的两个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>
实际输出是NaN ，
我找到了解决方案，因为我有重复的 Html Id，我在移动设备上使用了相同的 Id。
4 个解决方案
解决方案1
1 已采纳 2019-08-30 17:02:44
如果您的代码正是您在问题中包含它的方式，那么您就有了一些语法错误。 首先，您需要删除导致这些错误的错误空格。 此外，您应该使用其value属性而不是innerText访问input元素的value 。
修复这些项目，这似乎有效：
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>
解决方案2
0 2019-08-30 17:12:09
你的代码片段有很多语法错误； 我修复了它们，但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>
解决方案3
0 2019-08-30 17:12:18
它工作正常不知道是什么问题
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>
解决方案4
0 2019-08-30 17:12:53
使用 .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>
Angular 无法通过 [(ngModel)] 获取输入值，当被 JavaScript 更改时
[英]Angular can't get input value by [(ngModel)], when changed by JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.