HTML表单提交后值未传入JS函数，运行无响应问题求助

1. 核心问题1：未阻止表单默认提交行为 #

你使用了type="submit"的按钮，点击后浏览器会默认执行表单提交逻辑，你的action属性为空，会直接刷新当前页面，导致JS函数还没执行完就被中断。
修复方法二选一即可：

• 把提交按钮改成普通按钮：<input type="button" value="Submit" onclick="getWeather()">
• 保留提交按钮，在点击事件中阻止默认行为：<input type="submit" value="Submit" onclick="getWeather();return false;">

2. 核心问题2：JS语法错误，continue关键字误用 #

continue只能在循环语句（for/while等）中使用，你在if-else分支里写continue会直接抛出语法错误，整个函数直接停止执行。
修复方法：把else块里的continue直接删除即可，if判断不成立自然会往下执行后续赋值逻辑。

3. 核心问题3：HTML结构不符合规范 #

• DOCTYPE声明写错，正确写法是<!DOCTYPE html>，你遗漏了开头的感叹号
• 所有的script、link标签都放在了<html>标签外部，属于无效结构，会导致资源加载异常
• 错误使用<header>标签存放页面title等元信息，页面元信息应该放在<head>标签里，<header>是用于页面内容区域的头部语义标签
  修复后的HTML结构参考：

<!DOCTYPE html>
<html>
<head>
  <title> Weather </title>
  <script src="getWeatherData.js" type="text/javascript"> </script>
  <link rel="stylesheet" href="page3.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Girassol&family=Noto+Sans+JP&display=swap" rel="stylesheet">
</head>
<body>
<!-- 原有页面导航、表单、结果展示内容保持不变即可 -->
</body>
</html>

4. 其他问题：空ID选择器会报错 #

你代码里多个document.getElementById("")，传入空字符串作为ID会直接抛出错误，打断后续代码执行，建议先把这些行注释掉，等你给对应的td元素添加了明确ID之后再放开。

修复后的JS参考代码 #

function getWeather() {
    var zipCode = document.getElementById('zipCodeEnter').value.trim();
    var country = document.getElementById('countrySelect').value.trim();
    if(zipCode=="" || country=="") {
        alert("Please complete form");
        return;
    }
    document.getElementById("location").innerHTML = "stuff";
    document.getElementById("longitude").innerHTML = "stuff";
    document.getElementById("latitude").innerHTML = "stuff";
    document.getElementById("weather").innerHTML = "stuff";
    document.getElementById("windSpeed").innerHTML = "stuff";
    document.getElementById("windGust").innerHTML = "stuff";
    // 下方空ID的代码行待对应td配置ID后再取消注释
    // document.getElementById("").innerHTML = "stuff";
    // document.getElementById("").innerHTML = "stuff";
    // document.getElementById("").innerHTML = "stuff";
    // document.getElementById("").innerHTML = "stuff";
    // document.getElementById("").innerHTML = "stuff";
}

可选优化点 #

表单内的select标签不需要写form="country"属性，select本身已经嵌套在form标签内，会自动关联所属表单，该属性属于冗余内容，可直接删除。

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