我想做一个清晰的搜索栏。我在哪里犯了错误？

Question

我想创建一个可清除的搜索字段。当我单击十字按钮时，我想重置输入的值

function clear() {
  var a = document.getElementById('searchField');
  a.value = "";
}

<div class="searchGroup">
  <input type="text" id="searchField">
  <button onclick="clear()">&times;</button>
</div>

我希望输入应该没有值重置。

Answer 1

将函数名称从clear更改为其他名称。尽管已弃用，但它可能正在调用replaceAll

function clearInput() {
  document.getElementById('searchField').value = "";
}

<div class="searchGroup">
  <input type="text" id="searchField">
  <button type="button" onclick="clearInput()">&times;</button>
</div>

Answer 2

除了更改方法的名称之外，还可以使用事件侦听器（而不是嵌入式javascript）来使用正确的代码。

document.getElementById('clearSearch').addEventListener('click', clear);

function clear() {
  document.getElementById('searchField').value = '';
}

<div class="searchGroup">
  <input type="text" id="searchField">
  <button type="button" id="clearSearch">&times;</button>
</div>