Vanilla JS中form元素keyup正常但submit事件监听失效排查

嘿，咱们先理清楚问题：你的submit事件没触发，其实不需要修改HTML，问题主要出在JavaScript的处理上，不过有几个关键细节要调整：

1. 解开submit事件监听的注释 #

你代码里把formEl.addEventListener("submit", getWeatherdata);给注释掉了，这是submit事件没触发的直接原因，先把注释去掉，让监听生效。

2. 阻止表单提交的默认行为 #

表单默认提交后会刷新页面，这会导致你的API请求还没完成页面就刷新了，看起来像是事件没触发。所以要在getWeatherdata函数里添加阻止默认行为的代码：

const getWeatherdata = function(event) {
  // 阻止表单默认提交行为，避免页面刷新
  event.preventDefault();
  
  // 原来的API请求逻辑...
  const url = `http://api.openweathermap.org/data/2.5/weather?q=London&appid=2489ed561dc99d173a2f394574bc107e`;
  const response = fetch(url)
    .then(result => result.json())
    .then(data => {
      console.log(data)
      searchBar.style.display = "none";
      resultArea.style.display = "block";
      let k = parseInt(data.main.temp);
      let final = Math.floor(9/5 * (k -273) + 32);
      currTemp.textContent = `${final}°F`;
      weather.textContent = data.weather[0].description;
    })
    .catch(err => {
      // 可以加个错误处理，比如提示用户城市不存在
      console.error('获取天气数据失败:', err);
    });
}

3. 额外优化：用用户输入的城市名替换硬编码的London #

既然你做了搜索框，不如把硬编码的London换成cityName变量，这样用户搜索的城市才会生效：

// 用encodeURIComponent处理城市名，避免特殊字符导致请求出错
const url = `http://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(cityName)}&appid=2489ed561dc99d173a2f394574bc107e`;

关于HTML的小规范建议（非必需） #

你的HTML结构完全没问题，不过有个小拼写错误：搜索框的class是search-placholder，应该是search-placeholder，虽然不影响功能，但规范命名能让代码更易维护。

总结一下：主要修改JS的注释和添加默认行为阻止，HTML不需要调整就能解决submit事件的问题～

内容的提问来源于stack exchange，提问作者theusual