如何在HTML中使用prompt输入变量实现指定章节锚点跳转

章节跳转功能实现方案 #

修正后的JS代码 #

把你原来的JS代码替换为以下内容即可：

<script>
function jumpToChapter() {
  const input = prompt("请输入要跳转的章节号（范围1-18）：");
  // 处理用户点击取消的情况
  if (!input) return;
  // 格式化输入为数字
  const chapter = Number(input.trim());
  // 校验输入合法性
  if (isNaN(chapter) || chapter < 1 || chapter > 18) {
    alert("输入无效，请输入1到18之间的整数章节号");
    return;
  }
  // 拼接锚点完成跳转
  window.location.hash = `#C${chapter}`;
}
</script>

添加入口触发功能 #

在HTML顶部的固定跳转链接区域，新增一个触发按钮：

<p><a href="#C12">Jump to Chapter 12</a></p>
<p><a href="#C10">Jump to Chapter 10</a></p>
<!-- 新增以下按钮 -->
<p><button onclick="jumpToChapter()">输入章节号跳转</button></p>

功能说明 #

• 输入内容会自动校验，非数字、超出1-18范围的无效输入会弹出提示
• 合法输入会自动拼接为#C+章节号格式的锚点，浏览器原生支持滚动到对应id的元素位置，兼容性好
• 用户点击prompt弹窗的取消按钮时不会触发任何操作，无报错

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