本文详解如何通过 HTML 表单与 JavaScript 实现用户输入端口号后，自动重定向至同一域名下对应端口的 URL（如 https://mysite.com:8080），并修正常见 DOM 绑定、模板字符串、ID 冲突等关键错误。

本文详解如何通过 html 表单与 javascript 实现用户输入端口号后，自动重定向至同一域名下对应端口的同一域名 url（如 `https://mysite.com:8080`），并修正常见 dom 绑定、模板字符串、id 冲突等关键错误。

要实现“输入端口 → 跳转到 https://example.com:端口号”这一功能，核心在于：正确获取表单输入值、构造合法 URL，并在提交时阻止默认行为、执行重定向。但原始代码存在多个易被忽略却导致功能失效的关键问题，下面逐一说明并提供健壮实现。

YOYA优雅

YOYA优雅是中科闻歌推出的多模态 AI 音视频内容创作平台。

下载

✅ 关键修复点说明

• ID 唯一性冲突：原始代码中
  和 同时使用 id="myForm"，违反 HTML ID 唯一性规范，导致 document.getElementById('myForm') 可能返回错误元素或 null。
• 模板字符串语法错误：${baseUrl}:${port} 必须用反引号（`）包裹，而非单引号 ' 或双引号 "，否则变量不会被解析。
• 输入元素缺失正确 ID：JavaScript 中通过 getElementById('portNumber') 查找输入框，因此 必须显式设置 id="portNumber"。
• 脚本执行时机：DOM 元素必须在脚本执行前已加载。若 <script> 放在 <head> 中，而表单尚未解析，getElementById 将返回 null。推荐将脚本置于 </script>