Script works in html, but not externally

Question

I am pretty new to this game, and I am trying to make a website, using new tricks as i go along.

I am coding a set of buttons to instead of going to another page, pop-up (Modal i think its called?)

it works well when i have all the script in HTML but will not work for me when I put the code externally.

ONLY WORKING ON THE ABOUT BUTTON CURRENTLY

var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function(){
    modal.style.display = "block";}
span.onclick = function (){
    modal.style.display = "none";}
window.onclick = function (event){
    if(event.target === modal) {
        modal.style.display = "none";}}

*
{
margin: 0;
padding: 0;
}

header
{
background-image: url("../images/webBack.jpg");
    background-color: powderblue;
    height: 100vh;
    background-size: cover;
    background-position: center;


}
a{
    color: black;
}
a:hover{
    color:white;
    transition-duration: 0.3s;

}
.row{
    position: center;
    max-width: 95%;
    margin: auto;


}

.logo img{
    width: 150px;
    height: auto;
    float: left;
}
.main-nav{
    float:right;
    list-style:none;
    margin-top: 30px;

}
.main-nav li{
    display: inline-block;
}

.button1 {
    background-color: cornflowerblue;
    opacity: 0.2;
    font-size: 16px;
    text-align: center;
    padding: 14px 28px;
    border: 2px solid black;
    transition-duration: 0.2s;
    cursor: pointer;
}
.button1:hover{
    background-color: cornflowerblue;
    color: white;
    opacity: 1;
    font-size: 18px;

}
.modal{
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content{
    background-color: aliceblue;
    margin-top: 150px;
    margin-left: 25%;
    padding: 20px;
    border: 2px solid whitesmoke;
    width: 50%;
    height: 50%;
    overflow: auto;
}
.close{
    color: gray;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
body{
    font-family: monospace;

}

.Hero{
    position: absolute;
    margin: 500px;
    margin-left: 25%;
    margin-top: 0;
    pointer-events:none;
}

h1{
    color:white;
    text-transform: uppercase;
    font-size: 60px;
    text-align: center;
    margin-top: 275px;

}
p{
    color: black;
    font-size: 16px;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Portia Dance Sports Therapy</title>
    <link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
    <header>
        <div class="row">
            <div class="logo">
                <img src="images/Logo.png">
            </div>
    <script src="scripts/main.js"></script>
            <ul class="main-nav">
                <li><button class = button1><a href = "src/about.html">Home</a></button></li>
                <li><button id="about" class = button1>About</button></li>
                <li><button class = button1><a href=""> What is? </a></button></li>
                <li><button class = button1><a href=""> Contact </a></button></li>
                <li><button class = button1><a href=""> FAQ </a></button></li>
            </ul>
        </div>
        <div class="Hero">
            <h1>Portia Sports Therapy</h1>
        </div>
    </header>
    <div id="aboutMod" class="modal">
        <div class="modal-content">
            <span class="close">&times</span>
            <p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
                so that makes me shit hot at this therapy business! <br>
                So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
        </div>
    </div>

</body>
</html>

in the snippet it works...

I am using IntelliJ

maybe something in the HTML? I can't figure it out.

What do you mean by `will not work for me when I put the code externally`? How are you trying to include the code and what is going wrong (are you seeing errors logged to the console etc)? — rh16, Mar 14 '19 at 22:29

score 1 · Accepted Answer · answered Mar 14 '19 at 22:30

You are referencing your script before the elements exist. Just reference the script after they exist. Try putting your script tag above your end body tag. I tested with your code and this does the job.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Portia Dance Sports Therapy</title>
    <link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
    <header>
        <div class="row">
            <div class="logo">
                <img src="images/Logo.png">
            </div>
            <ul class="main-nav">
                <li><button class = button1><a href = "src/about.html">Home</a></button></li>
                <li><button id="about" class = button1>About</button></li>
                <li><button class = button1><a href=""> What is? </a></button></li>
                <li><button class = button1><a href=""> Contact </a></button></li>
                <li><button class = button1><a href=""> FAQ </a></button></li>
            </ul>
        </div>
        <div class="Hero">
            <h1>Portia Sports Therapy</h1>
        </div>
    </header>
    <div id="aboutMod" class="modal">
        <div class="modal-content">
            <span class="close">&times</span>
            <p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
                so that makes me shit hot at this therapy business! <br>
                So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
        </div>
    </div>
    <script src="scripts/main.js"></script>
</body>
</html>

Alternatively, you can tell your JS to execute after the page is ready if you want to leave the script tag where it is. Although this code below may not be completely cross browser compatible, you can also do it with Jquery instead of pure javascript which should defintely be cross browser compatible.

function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}

r(function(){
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];

btn.onclick = function(){
    modal.style.display = "block";}
span.onclick = function (){
    modal.style.display = "none";}
window.onclick = function (event){
    if(event.target === modal) {
        modal.style.display = "none";}}
        });

If you decide to include Jquery in your HTML then you can do this.

$( document ).ready(function() {
        var modal = document.getElementById("aboutMod");
    var btn = document.getElementById("about");
    var span = document.getElementsByClassName("close")[0];

    btn.onclick = function(){
        modal.style.display = "block";}
    span.onclick = function (){
        modal.style.display = "none";}
    window.onclick = function (event){
        if(event.target === modal) {
            modal.style.display = "none";}}
});

If you want to try the jquery solution just put this in between your head tags.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Script works in html, but not externally

1 Answers1