Vanilla Javascript：如何创建一个包含隐藏结果的有效搜索栏？

Question

我是 Javascript 的新手，已经使用了将近一个月。我正在尝试创建一个网站复活节彩蛋，可以通过在搜索栏中输入一个隐藏的词来找到它。我的问题主要与使变量 value 读取 array 中的字符串有关。没有弹出任何错误消息。

这是我的代码：

let searchResults = ['dog', 'cat', 'bird'];
let searchInput = document.querySelector('.search-box .input-box #searchbar');

function searchBar() {
  searchInput.addEventListener("keyup", function(event) {
    if (event.keyCode == 13) {
    } else {
    }
    });
  searchInput.addEventListener("input", function(event) {
    let value = event.target.value;
    if (value == searchResults[2] && (event.keyCode == 13)) {
      window.location.href = "bird.html";
    } else {
    }
  });
}

键码多次触发还有一个小问题。我不太担心这个，但如果能找到解决办法就好了。

Answer 1

输入事件没有“keyCode”属性。 keyCode 仅存在于 keyboard events, but input 是它自己的独立事件类型。

改为使用 keyup 事件。无论如何，真的没有理由拥有两个独立的事件处理程序。

let searchResults = ['dog', 'cat', 'bird'];
let searchInput = document.querySelector('#searchbar');


searchInput.addEventListener("keyup", function(event) {
  if (event.keyCode == 13) {
    
    let value = event.target.value;
    if(value == searchResults[2]){
    
      // window.location.href = "bird.html";
      console.log("birb");
    
    }else{
    
      // User hit enter but it wasn't bird...
    }
    
  }
});

<input id=searchbar>