我想使用这两个事件进行搜索：按键和鼠标单击，但它们似乎无法协同工作

Question

我是 Javascript 的新手，目前正在制作天气应用。我正在尝试使用按键和点击进行搜索，但它们似乎无法协同工作。我向用于搜索的按钮添加了两个事件侦听器。如果我注释掉按键代码，则单击似乎有效。添加按键部分后，我无法同时使用按键和点击进行搜索。

const api = {
      key: "48f26e932d82012fa8f78fca8da09da8",
      base: "https://api.openweathermap.org/data/2.5/",
    };
    
    ***const search = document.querySelector(".search");
    const btn = document.querySelector(".btn");
    btn.addEventListener("click", getInput);
    btn.addEventListener("keypress", getInput);
    
    function getInput(event) {
      event.preventDefault();
      if (event.type == "click") {
        getData(search.value);
        console.log(search.value);
      }
    }
    
    function getInput(event) {
      if (event.keyCode == 13) {
        getData(searchbox.value);
        console.log(search.value);
      }
    }***
    
    function getData() {
      fetch(`${api.base}weather?q=${search.value}&units=metric&appid=${api.key}`)
        .then((response) => {
          return response.json();
        })
        .then(displayData);
    }
    
    function displayData(response) {
      // console.log(response);
      if (response.cod === "404") {
        const error = document.querySelector(".error");
        error.textContent = "Please enter a valid city";
        search.value = "";
      } else {
        const city = document.querySelector(".city");
        city.innerText = `${response.name}, ${response.sys.country}`;
    
        const today = new Date();
        const date = document.querySelector(".date");
        date.innerText = dateFunction(today);
    
        const temp = document.querySelector(".temp");
        temp.innerHTML = `${Math.round(response.main.temp)} <span>°C</span>`;
    
        const weather = document.querySelector(".weather");
        weather.innerText = `${response.weather[0].main}`;
    
        const tempRange = document.querySelector(".temp-range");
        tempRange.innerText = ` ${Math.round(response.main.temp_min)}°C / ${Math.round(
          response.main.temp_max
        )}°C`;
    
        const weatherIcon = document.querySelector(".weather-icon");
        const iconURL = "http://openweathermap.org/img/w/";
        weatherIcon.src = iconURL + response.weather[0].icon + ".png";
    
        search.value = "";
      }
    }
    
    function dateFunction(d) {
      let months = [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "June",
        "July",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec",
      ];
      let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
    
      let day = days[d.getDay()];
      let date = d.getDate();
      let month = months[d.getMonth()];
      let year = d.getFullYear();
    
      return `${day}, ${date} ${month} ${year}`;
    }

Answer 1

keypress 事件在该元素内按下某个键时触发，例如在 <input> 上，如果您在输入框内键入，它会触发。

在这种情况下，您要将侦听器添加到按钮。为了让它在你需要的时候注册，我会像这样将它添加到搜索输入中：

search.addEventListener("keypress", getInput);

这是一个工作演示：

let search = document.getElementById("search");
let submit = document.getElementById("submit");


function getData() {
  console.log("Fetching Data");
}

submit.addEventListener("click", getData);
search.addEventListener("keypress", (event) => {
  if(event.keyCode === 13) {
    getData();
  }
});

<input type="text" id="search"/>
<button id="submit">Search</button>

我想使用这两个事件进行搜索：按键和鼠标单击，但它们似乎无法协同工作

I want to search using both events: Keypress and Mouse click but they don't seem to be working together

javascript

keypress