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

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

在 Web 开发中，有时需让用户动态指定服务端口（例如测试不同开发环境或代理服务），并通过前端直接跳转至 https://example.com:PORT。但初学者常因几个关键细节导致跳转失败：DOM 元素未加载即绑定事件、ID 重复、模板字符串误用单引号、URL 协议拼写错误等。

RHTV

RHTV是一款AI文本写作工具，RunningHub 推出的原生 AI 无限画布创作工具。

下载

以下为完整可运行的解决方案：

✅ 正确代码结构（含关键修复）

  <title>Port Redirect Tool</title>

<script> // ✅ 关键：脚本必须置于 form 之后，或使用 DOMContentLoaded document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); const port = document.getElementById('portNumber').value.trim(); // ⚠️ 注意：实际使用时请替换为真实、可访问的 HTTPS 域名 // 示例中 "h--ps://" 是故意留下的错误写法（应为 "https://"），仅作教学警示 const baseUrl = "https://mysite.com"; // ← 修正协议拼写！ // ✅ 使用反引号（`）启用模板字符串，单引号/双引号不支持 ${} const targetUrl = `${baseUrl}:${port}`; console.log("Redirecting to:", targetUrl); window.location.href = targetUrl; }); </script>

? 常见错误与修复说明

• ID 冲突：原代码中 与
  重复，导致 getElementById('myForm') 获取到的是 input 而非 form，事件监听失效。✅ 已统一仅对
  使用 id="myForm"，输入框使用 id="portNumber"。
• 模板字符串语法错误：${baseUrl}:${port} 必须用反引号 ` 包裹，单引号 '${baseUrl}:${port}' 或双引号 "${baseUrl}:${port}" 不会解析变量。
• 脚本执行时机：若 <script> 写在 <form> 之前且未加 DOMContentLoaded 监听，getElementById 将返回 null。✅ 推荐将 script 放在 </script>