无法清除输入字段
[英]Cannot clear input field
问题描述
我正在用JavaScript创建一个过滤表。 一切正常。 但是，唯一似乎无效的行是inputValue = '' 。 不知道为什么它不想在过滤完成后清除该字段 。
如果将其替换为document.querySelector('.form__input').value似乎正常，但我不想重复相同的代码。 我已经在上面将inputValue声明为inputValue 。
const initValues = [ 'Walmart', 'State Grid', 'Sinopec Group', 'China National Petrolium', 'Royal Dutch Shell', 'Toyota Motor', 'Volkswagen', 'BP', 'Exxon Mobil', 'Berkshire Hathaway' ]; const tableCreation = array => { const tableBody = document.querySelector('.table__body'); document.querySelectorAll('tr').forEach(el => el.parentNode.removeChild(el)); array.forEach(el => { const row = document.createElement('tr'); const cell = document.createElement('td'); const cellText = document.createTextNode(el); cell.appendChild(cellText); row.appendChild(cell); tableBody.appendChild(row); }); }; tableCreation(initValues); const filterTable = event => { event.preventDefault(); let inputValue = document.querySelector('.form__input').value; const filtered = initValues.filter(el => el.toLowerCase().includes(inputValue.toLowerCase())); if (filtered) { inputValue ? tableCreation(filtered) : tableCreation(initValues); } inputValue = ''; }; document.querySelector('.form__button').addEventListener('click', filterTable);
<!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"> <link rel="stylesheet" href="./css/3.css"> <title>Filtered list</title> </head> <body> <form class="form" id="form"> <label for="filter">Filtered: </label> <input class="form__input" type="text" id="filter" name="input" placeholder="Insert phrase..."> <button class="form__button" form="form" type="submit">Filter</button> </form> <table class="table"> <tbody class="table__body"></tbody> </table> <script src="./js/3.js"></script> </body> </html>
3 个解决方案
解决方案1
1 已采纳 2019-05-10 09:10:00
变量inputValue仅保留字段的实际值，该值与字段分离。
您可以将对字段的引用另存为变量，并按如下所示清除值：
const inp = document.querySelector('.form__input');
inp.value = '';
解决方案2
1 2019-05-10 09:10:31
let inputValue = document.querySelector('.form__input').value;
该行返回输入的字符串值。 当您尝试inputValue = ''; 您只更改变量“ inputValue”的值，而不更改输入字段的值。
为此，将字段另存为变量而不是其值，然后将其值更改为：
let inputField = document.querySelector('.form__input');
const filtered = initValues.filter(el => el.toLowerCase().includes(inputValue.toLowerCase()));
if (filtered) {
inputValue ? tableCreation(filtered) : tableCreation(initValues);
}
inputField.value = '';
解决方案3
1 2019-05-10 09:10:31
您已经只能从inputvalue获取值。但是您无法更改该值，因此get dom实例也请将该代码更改为
const filterTable = event => {
event.preventDefault();
let inputElement = document.querySelector('.form__input'),
inputValue = inputElement.value;
const filtered = initValues.filter(el => el.toLowerCase().includes(inputValue.toLowerCase()));
if (filtered) {
inputValue ? tableCreation(filtered) : tableCreation(initValues);
}
inputElement.value = '';
};
无法清除文本输入字段
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.