Home > database >  JavaScript works on my local host, but not on web host (Hostinger)
JavaScript works on my local host, but not on web host (Hostinger)

Time：07-08

I'm new to programming so sorry if my wording is a bit off. I have a website that runs perfectly from my own computer (Mac), but once I send it to Hostinger the JavaScript is not running.

I have checked for src and everything seems to be referenced fine.

Here is my html code with the JavaScript at the very bottom. Below that is the CSS if that might be the problem.

Is anybody able to assist?

* {
    box-sizing: border-box;
    margin: 0;
    padding:0;
    font-family: 'noteworthy', sans-serif;
    overflow-x: hidden;
}
.cb a {
    color: whitesmoke;
    text-decoration: none;
}
.cb a:hover {
    color: rgb(209, 146, 146);
}
.explorer a {
    color: rgb(209, 146, 146);
    text-decoration: none;
}
.explorer a:hover {
    color: rgba(209, 146, 146, .7);
}
.video a {
    color: whitesmoke;
    text-decoration: none;
}
.video a:hover {
    color: rgb(209, 146, 146);
    transform: scale(1.1);
}
.programmer a {
    color: whitesmoke;
    text-decoration: none;
}
.programmer a:hover {
    color: rgb(209, 146, 146);
    transform: scale(1.1);
}
.cb {
    position: absolute;
    top: 30px;
    left: 118px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 30;
    letter-spacing: 2px;
    font-size: 20px;
    z-index: 106;
    color: whitesmoke;
    text-decoration: none;
    transition: 0.05s ease-in;
}
.cb:hover {
    transform: scale(1.08);
}
.explore {
    position: absolute;
    top: 540px;
    left: 118px;
    font-size: 16px;
    background: rgba(240, 240, 250, 0.7);
    padding: 10px 26px;
    text-decoration: none;
    color: black;
    text-transform: uppercase; 
    letter-spacing: 3px;
    transition: 0.08s ease-in;
    z-index: 104;
}
.explore:hover {
    letter-spacing: 5px;
    background-color: rgb(209, 146, 146);
}
.explorer {
    position: absolute;
    top: 206px;
    left: 110px;
    padding: 0px 2px 46px 3px;
    font-size: 8em;
    font-weight:30;
    line-height: 1;
    color: rgb(209, 146, 146);
    text-shadow: -4px 1px 6px rgba(0, 0, 0, 0.7);
    z-index: 100;
    transition: 0.1s ease-in;
    cursor: pointer;   
}
.explorer span:not(:first-child) {
    margin-left: -42px;
    
}
.explorer:hover {
    transform: scale(1.03) translateY(-8px);
} 
.menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    height: 100%;
    display: flex;
    align-items:center;
    justify-content: center;
    background-color: rgb(209, 146, 146);
}
.menu ul {
    position: relative;
    list-style: none;  
}
.menu ul li a {
    text-decoration: none;
    font-size: 2em;
    color: whitesmoke;
}
.menu ul li a:hover {
    color: black;
}
.programmer {
    position: absolute;
    top: 372px;
    left: 218px;
    padding: 0px 3px 22px 5px;
    font-size: 4em;
    z-index: 104;
    font-weight:800;
    font-style: bold;
    line-height: 1;
    text-shadow: -4px 1px 6px rgba(0, 0, 0, 0.7);
    color: whitesmoke;
    cursor: pointer;
    transition: 0.08s ease-in;
    
}
.programmer span:not(:first-child) {
    margin-left: -16px;
}
.programmer:hover {
    color: rgb(209, 146, 146);
    transform: scale(1.1) translateY(-6px);
} 
.showcase {
    position: absolute;
    right: 0;
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: whitesmoke;
    z-index: 2;
    transition: 0.4s;
}
.showcase.active {
    right: 300px;
}
.showcase header {
    position: absolute;
    top: 28px;
    left: 78vw;
    width: 100%;
    z-index: 1000; 
    display: flex;
    justify-content: space-between;
}
.showcase video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    min-height: 900px;
}
.social {
    position: absolute;
    bottom: 4vh;
    left: 98px;
    padding: 20px;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity:.8;
}
.social li {
    list-style: none;
}
.social li a {
    display: inline-block;
    margin-right: 12px;
    transform: scale(0.8);
    transition: 0.08s ease-in;
}
.social li a:hover {
    transform: scale(0.9) translateY(-3px);
    filter:contrast(10);  
}
.text p{
    position: absolute;
    z-index: 106;
    top: 455px;
    left: 118px;
    width: 1000px;
    font-size: 1.3em;
    text-indent: 38px;
    color: whitesmoke;
}
.toggle {
    width: 40px;
    height: 40px;
    background: url(Menu.png);
    background-repeat: no-repeat;
    background-size: 35px;
    cursor: pointer;
    filter: brightness(100); 
}
.toggle:hover {
    transform: scale(1.2);
    filter: none;
} 
.toggle.active {
    background: url(Close.png);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center;
    transform: scale(0.8);
}
.video {
    position: absolute;
    top: 334px;
    left: 66px;
    padding: 0px 4px 20px 5px;
    z-index: 102;
    font-size: 3em;
    font-weight:30;
    line-height: 1;
    text-shadow: -4px 1px 6px rgba(0, 0, 0, 0.7);
    transition: .08s ease-in;
    color: whitesmoke;
    cursor: pointer;
}
.video:hover {
    color: rgb(209, 146, 146);
    transform: scale(1.1) translateY(-6px);
}
@media(max-width:1160px) {
    .cb {
        left: 80px;
    }
    .explorer {
        left: 60px;
    }
    .video {
        left: 20px;
    }
    .programmer {
        left: 171px;
    }
    .text p{
        width: 500px;
        left: 78px;
    }
    .explore {
        top: 640px;
        left: 78px;
    }
    .social {
        left: 58px;
    }
    .menu ul li a {
        font-size: 1.8em;
    }
    .menu {
        width: 270px;
    }
    .showcase.active {
        right: 270px;
    }
    .toggle.active {
        z-index: 200;
}
@media(max-width:800px) {
    .cb {
        left: 66px;
    }
    .explorer {
        left: 52px;
        font-size: 6em;
        line-height: .75;
        text-shadow: -3px .75px 4.5px rgba(0, 0, 0, 0.7); 
    }
    .explorer span:not(:first-child) {
        margin-left: -31.5px;
    }
    .video {
        left: 20px;
        top: 296px;
        font-size: 2.25em;
        line-height: .75;
        text-shadow: -3px .75px 4.5px rgba(0, 0, 0, 0.7);
    }
    .programmer {
        left: 134px;
        top: 326px;
        font-size: 48px;
        line-height: .75;
        text-shadow: -3px .75px 4.5px rgba(0, 0, 0, 0.7);
    }
    .programmer span:not(:first-child) {
        margin-left: -11px;
    }
    .showcase video {
        min-height: 600px;
    }
    .social {
        left: 56px;
    }
    .text p{
        top: 378px;
        left: 56px;
        width: 450px;
        font-size: 1.15em;
        text-indent: 20px;
    }
    .explore {
        position: absolute;
        top: 510px;
        left: 56px;
        font-size: 15px;
        background: rgba(240, 240, 250, 0.7);
        padding: 8px 22px;
        text-decoration: none;
        color: black;
        text-transform: uppercase; 
        letter-spacing: 2.3px;
        transition: 0.1s;
        z-index: 104;
    }
    .social {
        left: 36px;
    }
    .social li {
        list-style: none;
    }
    .social li a {
        display: inline-block;
        margin-right: 9px;
        transform: scale(0.8);
        transition: 0.15s ease-in;
    }
    .menu ul li a {
        font-size: 1.65em;
        color: black;
        z-index: 200;
    }
    .menu ul li a:hover {
        color: whitesmoke;
    }
    .menu {
        width: 240px;
    }
    .showcase.active {
        right: 240px;
    }
}
@media(max-height:770px) {
    .social {
        top: 650px;
        bottom: none;
    } 
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stil1.css">
  <title>Presents Christian Bredli</title>
</head>
<body>
  <section >
    <header>
      <div ></div>
    </header>
    <h2 ><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. WHO AM I.html" target="_blank">Christian Bredli</a></h2>
    <video src="DRONEVIDEO1.mp4" muted loop autoplay></video>
    <h2 ><a href="/Users/christianbredli/Documents/PROGRAMMERER/3 Chris´Adventures.html" target="_blank">
      <span>E</span>
      <span>x</span>
      <span>p</span>
      <span>l</span>
      <span>o</span>
      <span>r</span>
      <span>e</span>
      <span>r</span>
    </a></h2>
  <h2 ><a href="/Users/christianbredli/Documents/PROGRAMMERER/2 VIDEOGRAPHY.html" target="_blank">
    <span>V</span>
    <span>i</span>
    <span>d</span>
    <span>e</span>
    <span>o</span>
    <span>&nbsp</span>
    <span>e</span>
    <span>d</span>
    <span>i</span>
    <span>t</span>
    <span>o</span>
    <span>r</span>
  </h2></a>
  <h2 ><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. PROGRAMMING.html" target="_blank">
    <span>P</span>
    <span>r</span>
    <span>o</span>
    <span>g</span>
    <span>r</span>
    <span>a</span>
    <span>m</span>
    <span>m</span>
    <span>e</span>
    <span>r</span>
  </h2></a>
  <div >
    <p>I never stop travelling the world. My mission is to capture the most beautiful places on earth 
    and present them with passion. I work hard and have adopted the programming lifestyle. My competence is ever growing as is my will to make an impact.</p>
  <a href="/Users/christianbredli/Documents/PROGRAMMERER/3 Twisted World.html" target="_blank" >Explore</a>
  <ul >
    <li>
      <a href="https://www.instagram.com/christianbredli" target="_blank">
        <img src="Instagram.png" alt="Instagram">
      </a>
    </li>
    <li>
      <a href="https://www.linkedin.com/in/christian-bredli-a9613222b/" target="_blank">
        <img src="Linked In.png" alt="Linked in">
      </a>
    </li>
    <li>
      <a href="https://www.youtube.com/channel/UCddVJ3h30Qaf_F8ZC76t9Sg" target="_blank">
        <img src="Youtube.png" alt="Youtube">
      </a>
    </li> 
  </ul>
  </section>

  <div >
    <ul>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. WHO AM I.html">Who Am I?</a></li>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2 VIDEOGRAPHY.html">Videography</a></li>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. PROGRAMMING.html">Programming</a></li>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. COMPETENCE.html">Competence</a></li>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. ROLE MODELS.html">My Role Models</a></li>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. CONTACT INFO.html">Contact</a></li>
    </ul>
    <script>
      const menuToggle = document.querySelector('.toggle')
      const showcase = document.querySelector('.showcase')

      menuToggle.addEventListener('click', function() {
        menuToggle.classList.toggle('active')
        showcase.classList.toggle('active')
      })
    </script>
  </div>
</body>
</html>

CodePudding user response：

I tried the code on my machine serving it on a http server, and uploading on netlify to test and it works on both.

CodePudding user response：

It's possible that your JS is running before the DOM content has been fully loaded and parsed. It's generally recommended to wait until the DOM is fully loaded. Your JS would look something like this:

(function() {
    window.addEventListener('DOMContentLoaded', function (event) {
        const menuToggle = document.querySelector('.toggle'),
            showcase = document.querySelector('.showcase');
            
        menuToggle.addEventListener('click', function () {
            menuToggle.classList.toggle('active');
            showcase.classList.toggle('active');
        });
    });
})();

(note I also added an IFFE to avoid polluting the global namespace)

There are also some syntax errors in your HTML, which I have tidied up below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="stil1.css">
  <title>Presents Christian Bredli</title>
</head>
<body>
  <section >
    <header>
      <div >TOGGLE</div>
    </header>
    <h2 ><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. WHO AM I.html" target="_blank">Christian Bredli</a></h2>
    <video src="DRONEVIDEO1.mp4" muted loop autoplay></video>
    <h2 ><a href="/Users/christianbredli/Documents/PROGRAMMERER/3 Chris´Adventures.html" target="_blank">
      <span>E</span>
      <span>x</span>
      <span>p</span>
      <span>l</span>
      <span>o</span>
      <span>r</span>
      <span>e</span>
      <span>r</span>
    </a></h2>
  <h2 ><a href="/Users/christianbredli/Documents/PROGRAMMERER/2 VIDEOGRAPHY.html" target="_blank">
    <span>V</span>
    <span>i</span>
    <span>d</span>
    <span>e</span>
    <span>o</span>
    <span>&nbsp;</span>
    <span>e</span>
    <span>d</span>
    <span>i</span>
    <span>t</span>
    <span>o</span>
    <span>r</span>
  </a></h2>
  <h2 ><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. PROGRAMMING.html" target="_blank">
    <span>P</span>
    <span>r</span>
    <span>o</span>
    <span>g</span>
    <span>r</span>
    <span>a</span>
    <span>m</span>
    <span>m</span>
    <span>e</span>
    <span>r</span>
  </a></h2>
  <div >
    <p>I never stop travelling the world. My mission is to capture the most beautiful places on earth 
    and present them with passion. I work hard and have adopted the programming lifestyle. My competence is ever growing as is my will to make an impact.</p>
  <a href="/Users/christianbredli/Documents/PROGRAMMERER/3 Twisted World.html" target="_blank" >Explore</a>
  <ul >
    <li>
      <a href="https://www.instagram.com/christianbredli" target="_blank">
        <img src="Instagram.png" alt="Instagram">
      </a>
    </li>
    <li>
      <a href="https://www.linkedin.com/in/christian-bredli-a9613222b/" target="_blank">
        <img src="Linked In.png" alt="Linked in">
      </a>
    </li>
    <li>
      <a href="https://www.youtube.com/channel/UCddVJ3h30Qaf_F8ZC76t9Sg" target="_blank">
        <img src="Youtube.png" alt="Youtube">
      </a>
    </li> 
  </ul>
  </div>
  </section>

  <div >
    <ul>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. WHO AM I.html">Who Am I?</a></li>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2 VIDEOGRAPHY.html">Videography</a></li>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. PROGRAMMING.html">Programming</a></li>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. COMPETENCE.html">Competence</a></li>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. ROLE MODELS.html">My Role Models</a></li>
      <li><a href="/Users/christianbredli/Documents/PROGRAMMERER/2. CONTACT INFO.html">Contact</a></li>
    </ul>
    <script>
      (function() {
        window.addEventListener('DOMContentLoaded', function (event) {
          const menuToggle = document.querySelector('.toggle'),
            showcase = document.querySelector('.showcase');
            
          menuToggle.addEventListener('click', function () {
            menuToggle.classList.toggle('active');
            showcase.classList.toggle('active');
          });
        });
      })();
    </script>
  </div>
</body>
</html>

Page link：https//www.codepudding.com/database/467665.html

Prev:How to check if a button contains an emoji with the customID - Discord JS
Next:Problema Datatable PDF
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding