基于输入框内容跳转不同URL功能失效求助

嘿，我看到你遇到了点击按钮没反应的情况，咱们来一步步排查并修复这个问题：

主要问题分析 #

你的代码里有两个关键问题导致按钮点击没效果：

1. 缺少jQuery库引入
   你用了$（jQuery的简写语法），但页面里没有加载jQuery库，浏览器根本不认识$这个符号，自然无法执行后续的事件绑定逻辑。

2. 脚本执行时机过早
   如果你的脚本写在HTML表单元素之前，当浏览器执行这段JS代码时，#submit-form按钮还没被渲染出来，$("#submit-form")找不到对应的元素，点击事件也就绑定失败了。

修正后的完整代码 #

我帮你调整了代码，解决了上述问题，还优化了一些细节：

<!DOCTYPE html>
<html>
<head>
    <!-- 先引入jQuery库，确保这行代码在你的自定义脚本之前 -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
    <form class="form-inline">
        <div class="form-group">
            <!-- 给input添加ID，让选择器更精准 -->
            <input type="text" id="redirect-input">
            <button id="submit-form" type="button">Go</button>
        </div>
    </form>

    <!-- 将自定义脚本放在页面底部，或者用$(document).ready()包裹 -->
    <script type="text/javascript">
        // 确保DOM元素全部加载完成后再执行代码
        $(document).ready(function() {
            var urlMapping = {
                "STRING1" : "https://google.com/",
                "STRING2" : "https://stackoverflow.com/",
                "STRING3" : "https://twitter.com/home"
            };

            $("#submit-form").click(function(){
                // 通过ID精准获取输入框内容
                var inputValue = $("#redirect-input").val().trim().toUpperCase();
                if (urlMapping.hasOwnProperty(inputValue)){
                    // 标准的页面跳转写法
                    window.location.href = urlMapping[inputValue];
                } else {
                    // 无匹配项时跳转到默认页面
                    window.location.href = "./default.html";
                }
            });
        });
    </script>
</body>
</html>

关键修改说明 #

• 引入jQuery库：在<head>中添加了jQuery的引入代码，你也可以替换成本地的jQuery文件路径。
• DOM加载完成事件：用$(document).ready()包裹了你的自定义脚本，确保所有HTML元素渲染完成后再绑定事件，避免找不到元素的问题。
• 精准选择器：给输入框添加了id="redirect-input"，这样获取输入内容时不会误选页面上的其他input元素。
• 标准跳转写法：把window.location改成了window.location.href，这是更规范、兼容性更好的页面跳转方式。

额外排查建议 #

如果修改后还是没反应，可以打开浏览器的开发者工具（按下F12），切换到「控制台」标签页，看看有没有报错信息——比如如果还是提示$ is not defined，那说明jQuery库没有正确加载，你需要检查引入路径是否正确。

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