Javascript 自动单击HTML按钮时出现问题_Javascript_Html_Css

Javascript 自动单击HTML按钮时出现问题

javascript html css

Javascript 自动单击HTML按钮时出现问题,javascript,html,css,Javascript,Html,Css,我正在研究CS50周8习题集。在下面的代码中，我有一个下拉列表和一个按钮，其中嵌入的链接取决于前者。由于某种原因，按钮会自动单击，而不是有意的。知道为什么会出问题吗 <!DOCTYPE html> <html lang="en"> <head> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.mi

我正在研究CS50周8习题集。在下面的代码中，我有一个下拉列表和一个按钮，其中嵌入的链接取决于前者。由于某种原因，按钮会自动单击，而不是有意的。知道为什么会出问题吗

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="styles.css" rel="stylesheet">
        <title>Justin's Homepage</title>
    </head>
    <body id="homepage">
        <h1 id="welcome">Welcome to Justin's Homepage!</h1>
        <p class="p1">Where would you like to travel next?</p>
        <select class="p1" id="location">
            <option value="interlaken">1. Interlaken</option>
            <option value="hokkaido" selected>2. Hokkaido</option>
            <option value="croatia.html">3. Croatia</option>
        </select>
        <div id="confirm">
            <form>
                <button class="p1" type="button" onclick="gotosite(); return false">Confirm!</button>
                <script>
                    var location = document.getElementById("location").value;
                    function gotosite(){
                        location.href(location + ".html");
                    }
                </script>
            </form>
        </div>
    </body>
</html>


贾斯汀的主页
欢迎来到贾斯汀的主页！
您下一步想去哪里旅行
1.因特拉肯
2.北海道
3.克罗地亚
确认！
var location=document.getElementById（“location”）.value；
函数gotosite（）{
location.href（location+“.html”）；
}

未单击该按钮

<script>
    var location = document.getElementById("location").value;


var location=document.getElementById（“location”）.value；

location

是全局范围内的预定义变量。你不能在那里重新申报。您的作业将直接转到现有的全局

位置

由于该行代码不在任何函数的范围内，因此它会立即执行。

当有人单击提交按钮而不是加载页面时，您需要获取

选择字段的值，因此您应该将值
获取逻辑保留在函数内
我还更新了window.location.href
东西，看看
这是一个工作片段


贾斯汀的主页
欢迎来到贾斯汀的主页！
您下一步想去哪里旅行
1.因特拉肯
2.北海道
3.克罗地亚
确认！
函数gotosite（）{
window.location.href=document.getElementById（“位置”）.value；
}
确实是这么说的
您可以使用上面示例中的代码来修复它，或者看看我的示例。
这有点不同
主要的区别是我在主体关闭之前放置了脚本。
我没有在按钮上使用onclick属性
相反，我使用了一个连接到按钮的eventListener。我更喜欢eventListener，因为它不需要存在于html中。
您只需创建一个js文件scripts.js
（）并将此代码插入其中。
这样做的好处是，您只需要使用此代码一次，就可以在多个页面上使用相同的功能
请注意，我还删除了按钮周围的
。原因是你不需要它。您添加了type=“button”
，它将此按钮标记为一个按钮，而不是表单提交，因此表单不会向自身提交GET
请求，但正如我多年前所了解的那样；少就是多
当然，还有很多东西可以告诉你并帮助你，但我希望这能让你在其他方面有一些见解来解决同样的问题


贾斯汀的主页
欢迎来到贾斯汀的主页！
您下一步想去哪里旅行
1.因特拉肯
2.北海道
3.克罗地亚
确认！
document.querySelector（'button'）。addEventListener（'click'，（）=>{
window.location.href=document.getElementById（“位置”）.value
});
location.href（location+“.html”）
-location.href
不是函数，因此将引发异常。var location=document.getElementById（“location”）.value覆盖窗口。位置
，当页面呈现时，您正在读取值