JavaScript按钮点击不跳转问题排查求助

我正在制作一个带有可跳转至子页面按钮的简单网页，所有HTML、JavaScript、CSS文件均位于同一文件夹。点击按钮时无法实现页面跳转，尝试了多种跳转方法均无效。以下是我的代码，请问问题出在哪里？

HTML代码 #

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
        <script src="script.js" type="text/javascript"></script>
           
        </script>
        <link href="styles.css" rel="stylesheet">
        <title>About me</title>
    </head>
    <body>
        <div class="title">
            <h1 style="size: 22;">HOMEPAGE</h1>
        </div>
        <div class="btn-group blue">
            <button id="general">General</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
        </div>
        <div class="float-container">
            <div class="float-child" style="border: white;">
                <img src="https://api.time.com/wp-content/uploads/2014/03/improving-life-health-hiking-nature.jpg" alt="Picture of Hiker" style="width: 100%; padding: 5px;"/>
            </div>
            <div class="float-child">
                <p>
                    Hello, welcome to my website. 
                </p>
            </div>
        </div>
    </body>
</html>

JavaScript代码 #

document.addEventListener('DOMContentLoaded', function(){
    let general = document.querySelector(".general");
    general.addEventListener('click', function(){
        window.location.replace("general.html");
    });
 });

1. 元素选择器不匹配 #

JS代码里用了.general（类选择器），但HTML中按钮的标识是id="general"，应该用ID选择器#general来获取按钮元素。选择器不匹配的话，无法给按钮绑定点击事件，自然不会触发跳转逻辑。

2. Script标签未正确闭合 #

Bootstrap的script标签没有单独闭合，直接嵌套了后续的script标签，这会导致浏览器解析DOM时出错，可能造成你的script.js无法正常加载执行。

修正后的代码 #

修正后的HTML（修复标签闭合问题） #

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <!-- 正确闭合Bootstrap的script标签 -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <script src="script.js" type="text/javascript"></script>
        <link href="styles.css" rel="stylesheet">
        <title>About me</title>
    </head>
    <body>
        <div class="title">
            <h1 style="size: 22;">HOMEPAGE</h1>
        </div>
        <div class="btn-group blue">
            <button id="general">General</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
        </div>
        <div class="float-container">
            <div class="float-child" style="border: white;">
                <img src="https://api.time.com/wp-content/uploads/2014/03/improving-life-health-hiking-nature.jpg" alt="Picture of Hiker" style="width: 100%; padding: 5px;"/>
            </div>
            <div class="float-child">
                <p>
                    Hello, welcome to my website. 
                </p>
            </div>
        </div>
    </body>
</html>

修正后的JavaScript（修复选择器问题） #

document.addEventListener('DOMContentLoaded', function(){
    // 使用ID选择器#general获取按钮
    let general = document.querySelector("#general");
    general.addEventListener('click', function(){
        window.location.replace("general.html");
    });
 });

另外，也可以用window.location.href = "general.html"实现跳转，和replace的区别是，后者不会在浏览器历史记录中保留当前页面的访问记录。

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