如何通过onsubmit将表单元素值传入getWeather函数？

嗨，我来帮你搞定这个问题！你当前的表单已经通过onsubmit触发了getWeather()，但还没把城市输入框的值传递进去，这里有几种实用的实现方式，你可以根据场景选择：

方法1：直接在onsubmit中获取值并传入 #

这是最直接的方式，修改onsubmit事件的代码，直接获取输入框的值作为参数传给getWeather：

<form action="#" onsubmit="getWeather(document.getElementById('city').value);return false">
  City: <input type="text" id="city">
  <input type="submit" />
</form>

对应的getWeather函数需要接受这个参数：

function getWeather(cityName) {
  // 这里就可以使用cityName变量来处理天气请求了
  console.log('要查询天气的城市：', cityName);
}

方法2：通过表单元素引用获取值 #

你也可以把整个表单对象传给函数，在函数内部获取输入框的值，这样如果表单后续有其他字段，扩展性更好：

<form action="#" onsubmit="getWeather(this);return false">
  City: <input type="text" id="city">
  <input type="submit" />
</form>

函数里通过表单对象获取输入值：

function getWeather(form) {
  const cityName = form.querySelector('#city').value;
  console.log('要查询天气的城市：', cityName);
  // 后续可以轻松获取表单里的其他字段
}

方法3：使用事件监听（推荐的现代写法） #

把JS逻辑和HTML结构分离，更符合代码维护的最佳实践，去掉HTML里的onsubmit属性，用JS添加事件监听：

<form id="weatherForm" action="#">
  City: <input type="text" id="city">
  <input type="submit" />
</form>

对应的JS代码：

// 获取表单元素
const weatherForm = document.getElementById('weatherForm');

// 添加提交事件监听
weatherForm.addEventListener('submit', function(e) {
  // 阻止表单默认的提交行为（替代return false）
  e.preventDefault();
  // 获取输入框的值
  const cityName = document.getElementById('city').value;
  // 调用getWeather函数
  getWeather(cityName);
});

function getWeather(cityName) {
  console.log('要查询天气的城市：', cityName);
  // 这里编写你的天气查询逻辑
}

这种方式的好处是HTML结构更干净，JS逻辑集中管理，后续修改或扩展时更方便。

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