Javascript Button Not Redirecting-CodePudding

I am trying to make a simple webpage with buttons that redirect to other subpages, all the HTML javascript, and CSS files are in the same folder. When I use the javascript code it just won't redirect when I click the button, anyone knows what is wrong?

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 >
            <h1 style="size: 22;">HOMEPAGE</h1>
        </div>
        <div >
            <button id="general">General</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
        </div>
        <div >
            <div  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 >
                <p>
                    Hello, welcome to my website. 
                </p>
            </div>
        </div>
    </body>
</html>

And here is the Javascript.

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

Anyone notice anything?

I tried different ways of redirecting on W3 schools and none of it worked.

CodePudding user response：

Because you have defined button by id not by class

<button id="general">General</button>

So change

let general = document.querySelector(".general");

let general = document.querySelector("#general");

document.addEventListener('DOMContentLoaded', function(){
    let general = document.querySelector("#general");
    general.addEventListener('click', function(){
        window.location = "https://www.facebook.com";
        return false;
    });
 });

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 >
            <h1 style="size: 22;">HOMEPAGE</h1>
        </div>
        <div >
            <button id="general">General</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
        </div>
        <div >
            <div  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 >
                <p>
                    Hello, welcome to my website. 
                </p>
            </div>
        </div>
    </body>
</html>