location.href is not working, can't acess to link location-CodePudding

I've created a "loading page" which should be the first page that users see when they connect. It's a simple page with a central bouton that people have to click. Once they do, they access to the rest of the website. All the pages including the loading page are in the same folder. Each page of the site has its own : "XXXXX.html".

So I've created a loader.html page, and implemented a javascript function, that is here :

let introBox = document.getElementById('intro');

introBox.addEventListener('click', function(){
    document.location.href = "main.html";
});

@keyframes sectionAnimation{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}

html {
    border: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}

*,*:before,*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    background-color: #fff;
    padding: 0;
    margin: 0;
    height: auto;
    width: 100%;
    background-repeat: no-repeat;
    & img{
        width: 50%;
    }
}

.loaderbody{
    background-image: url('../../Assets/R.png');
}

b {
  position: relative;
  display: block;
  font-family: helvetica neue, helvetica, sans-serif;
  line-height: 1.15em;
  margin-top: -1.15em;
  top: 2.3em;
  font-size: 0.67em;
  font-weight: 400;
  letter-spacing: 0.025em;
  opacity: 0.75;
  text-align: center;
}

b span {
  font-size: 0.785em;
  font-weight: 400;
  opacity: 0.4;
}

#intro {
  width: 200px;
  margin:auto;
  margin-top:25%;
  animation: sectionAnimation 1.5s both infinite;
  transform:scale(1);
  
}

.button {
    display: inline-block;
    text-decoration: none;
    position: relative;
    margin-top: 40px;
}

.button .bottom {
    position: absolute;
    left: 7px;
    top: 7px;
    width: 100%;
    height: 100%;
    background-color: #2acdc1;
    display: block;
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    transition: all .15s ease-out;
}

.button .top {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 24px 34px 22px 34px;
    border: 2px solid #04049d;
}

.button-dark .top {
    border: 2px solid #fff;
}

.button .top .label {
    font-family: sans-serif;
    font-weight: 600;
    color: #04049d;
    font-size: 12px;
    line-height: 110%;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    transition: all .15s ease-out;
}

.button-dark .top .label {
    color: #fff;
}

.button:hover .bottom {
    left: 0;
    top: 0;
    background-color: #f3f3f3;
}

.button:hover .top .label {
    color: #2acdc1;
}

.button-border {
    position: absolute;
    background-color: #2acdc1;
    -webkit-transition: all .25s ease-out;
    -moz-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
}

.button:hover .top .button-border-left,.button:hover .top .button-border-right {
    height: calc(100%   2px);
}

.button:hover .top .button-border-top,.button:hover .top .button-border-bottom {
    width: calc(100%   2px);
}

.button-border-left {
    left: -2px;
    bottom: -2px;
    width: 2px;
    height: 0;
}

.button-border-top {
    left: -2px;
    top: -2px;
    width: 0;
    height: 2px;
}

.button-border-right {
    right: -2px;
    top: -2px;
    width: 2px;
    height: 0;
}

.button-border-bottom {
    right: -2px;
    bottom: -2px;
    width: 0;
    height: 2px;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="../Css/main copie.css">
        <title>TP</title>
    </head>
    <body >
      <script type="text/javascript" src="../Js/loader.js"></script>
      <section id="intro">
        <div id="intro-content" >
      
          <div >
      
            <div >
      
              <div >
              
              <a href="#" >
      
                <div ></div>
      
                <div >
      
                <div >Let's go !</div>
                  
                  <div ></div>
                  <div ></div>
                  <div ></div>
                  <div ></div>
      
                </div>
      
                </a>
      
              </div>
      
             </div>
      
            </div>
      
           </div>
      
        </section>
      </body>
</html>

The element "intro" is my bouton on my loading page. However, when I click on it, I stay on the same URL. I've noticed that when I click on the box it automatically add a "#" at the end of my URL. So I assume the function is kinda working, and my click is detected.

It seems the problem is about the .location.href but I can't get it.

Thank you so much.

CodePudding user response：

There is a missing slash /, your code should look like this:

introBox.addEventListener('click', function(){
    document.location.href = "/main.html";
});

If you want to redirect outside your website, you have to add double slash //.

document.location.href = "//google.com";

EDIT: The actual error is on the tag with href="#", change it to "/main.html". You can remove the listener if you will, it's no longer needed.