单击按钮后如何使输入字段为空？

Question

我希望在按下搜索按钮后输入字段为空，以便我可以看到占位符文本。我怎样才能做到这一点？

        let inp1 = document.querySelector('#inp1');

        let arrai = ["cake", "apple", "banan"];



          function engine(){
            for(let srch of arrai){
              if (inp1.value === srch) {
                window.location.href = inp1.value+".html"
              } else {
                inp1.focus();
                inp1.style.border = "2px solid red";
                inp1.placeholder = "failed";
              }
            }
          }

Answer 1

inp1.value ='';

这会将输入设置为空白，并且应显示占位符。如果不行试试

inp1.innerHTML = '';

一般innreHTML只适用于div,spans等。输入有值。

Answer 2

您的问题的答案是您需要将值设置为空才能看到占位符。但是您的代码仅适用于数组中的第一个值，因为您假设匹配无效是错误的。事实并非如此，因为您还没有检查所有的可能性。

您需要做的是更改您的支票。最好使用 include 而不是 for 循环。

function engine(){
  var value = inp1.value.toLowerCase()
  var hasMatch = arrai.includes(value)
  if (hasMatch) {
    window.location.href = value + ".html"        
   } else {
     inp1.value = ''; // what you originally asked for
     inp1.focus();
     inp1.style.border = "2px solid red";
     inp1.placeholder = "failed";
   }
 }

用 for 循环来完成

function engine(){
  var hasMatch = false
  for(let srch of arrai){
    if (inp1.value === srch) {
      window.location.href = inp1.value + ".html"
      hasMatch = true
    }
  }
  if (!hasMatch) {
    inp1.value = '';
    inp1.focus();
    inp1.style.border = "2px solid red";
    inp1.placeholder = "failed";
  }
}