Как сделать поле ввода пустым после нажатия кнопки?

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, span и т. Д. Входные данные имеют значение.

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";
  }
}