Javascript 如何获得enter键来模拟按钮按下？

我正在开发一个天气应用程序，我只希望在按下Enter键或用户单击Submit时执行代码。问题是，只要按下任何键，代码就会执行，我不知道为什么？这通常不会有什么大不了的，但它每次都会请求API，而我每分钟只收到60个请求，因此在这段时间内，两三次搜索将达到该限制

let button = document.querySelector("#button");
let searchBox = document.querySelector("#search-box");
let city = document.querySelector(".city");
let feelsLike = document.querySelector(".feels-like");
let temperature = document.querySelector(".temp");
let weatherDescription = document.querySelector(".weather");
let windSpeed = document.querySelector(".wind");
let icons = document.querySelector(".icons");
searchBox.addEventListener("keypress", function (event) {
  if (event.key === "Enter") {
    document.getElementById("button").click();
  }
  fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=" +
      searchBox.value +
      "&units=metric&appid="
  )

...Rest of code to be executed

)};

---

我认为回车键模拟按键是有意义的，但我不完全确定怎么做——不幸的是，我在网上使用的任何资源都没有帮助。

在你的监听器

searchBox.addEventListener（“按键”，函数（事件）{..}

每次按键时，您都在执行

fetch

功能。因为

if

-条件不会影响

fetch

的执行

试试这个：

if (event.key === "Enter") {
    document.getElementById("button").click();
  
    fetch(
      "https://api.openweathermap.org/data/2.5/weather?q=" +
      searchBox.value +
      "&units=metric&appid="
    ) 
}

---

如Amacado所述，提取在if之外

此外，如果搜索框实际上是一个HTML

元素，则已经有一个OnSearch事件处理程序，它同时考虑了手机键盘（）中的enter键和放大镜图标。

您应该将（获取）逻辑放入按钮的单击处理程序中

其他几点：

• 如果您需要在从

  fetch

  获得响应后执行代码，则将该代码放入链式

  然后
  回调中。请注意，
  fetch
  返回的承诺解析为响应对象，并且您需要调用它的一个方法来获取另一个承诺，这反过来又将解析为actu艾尔数据

• 不要调用

  。单击（）

  。最好将目标代码放在命名函数中，然后在此处和按钮的单击处理程序中调用该函数
• 您已经有了按钮的变量，因此无需再次调用

  getElemebtById

函数过程（）{
取回(
"https://api.openweathermap.org/data/2.5/weather?q=" +
searchBox.value+
“&units=度量值&appid=”
).然后（功能（响应）{
return response.json（）；//将来你应该调试你的代码。然后你自己会发现这些问题。开发者控制台（点击F12）是你的朋友。
function process() {
  fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=" +
      searchBox.value +
      "&units=metric&appid="
  ).then(function (response) {
     return response.json(); // <-- maybe? or .text() ?
  }).then(function (data) {
     //...Rest of code to be executed
  });
});

button.addEventListener("click", process);

searchBox.addEventListener("keypress", function (event) {
  if (event.key === "Enter") process();
)};