Java Script not working in HTML file when uploaded

I’m confused how to make my JavaScript execute on the webpage. I have run this in copepen.io, and it works just as it should. But when I upload the html file, hovering over the circles doesn’t change anything.

What should I be doing different?

I tried uploading the js file, and putting <script src="script.js> in the head section, but that didn’t work either.

HTML & JavaScript

<div class="bubbles">
    <script src="script.js"></script>
    <div id="bubble-grid" class="bubble-grid-class">
        <div id="circle-1" class="circle">
      <p id="circleTextOne" class="circle-text">Confidence</p>
    </div>
        <div id="circle-2" class="circle">
            <p id="circleTextTwo" class="circle-text">Growth</p>                     </div> 
        <div id="circle-3" class="circle">
            <p id="circleTextThree" class="circle-text">Anxiety</p>
        </div> 
    </div>
<script>
// Circles are defined by the id "circle-1"
// Text <p> is defined by "circleTextOne"
var circleOne = document.getElementById('circle-1');
var staticTextOne = document.getElementById('circleTextOne');

var circleTwo = document.getElementById('circle-2');
var staticTextTwo = document.getElementById('circleTextTwo');

var circleThree = document.getElementById('circle-3');
var staticTextThree = document.getElementById('circleTextThree');


let staticOne = "CONFIDENCE";
let hoverOne = "Belief in yourself that can succeed and overcome obstacles";

let staticTwo = "GROWTH";
let hoverTwo = "It is important to continue and challenge your growth. You must be comfortable & confident with your current skill, then challenge yourself to achieve new ones.";

let staticThree = "ANXIETY";
let hoverThree = "Performance anxiety manifests when there is a gap between expected performance and capability. Anxiety can also bring forth a an edge and eagerness to succeed.";

let staticBackground = "linear-gradient(320deg,rgba(113,176,224,1.00) 0%,rgba(54,107,178,1.00) 51.40%,rgba(31,59,140,1.00) 100%)";
let hoverBackground = "url('https://zephyrsolutions.us/wave-background-for%20graphics.png')";

// For later use for random text using handlebars
let quotes = ["If at first don't succeed, try doing what your coach told you to do in the beginning!" , "You have to train your mind to be stronger than your emotions, or else you'll lose yourself overtime" , "Talent hits a target no one else can hit.  Genius hits a target no one else can see - Arthur Schopenhauer" , "You have been criticizing yourself for years, and it hasn't worked.  Try approving of yourself and see what happens!  - Louise Hay" , "Hard work beats talent, when talent fails to work hard  -  Kevin Durant" , "Coaches can give you information, they can give you guidelines, and they can put you in a position, but the only person who can truly make you better is YOU  -  Brandi Chastain"];


function onHoverOne () {
  staticTextOne.innerHTML = hoverOne;
  circleOne.style.backgroundImage = hoverBackground;
}
function onStaticOne () {
  staticTextOne.innerHTML = staticOne;
  circleOne.style.backgroundImage = staticBackground;
}

function onHoverTwo () {
  staticTextTwo.innerHTML = hoverTwo;
  circleTwo.style.backgroundImage = hoverBackground;
}
function onStaticTwo () {
  staticTextTwo.innerHTML = staticTwo;
  circleTwo.style.backgroundImage = staticBackground;
}

function onHoverThree () {
  staticTextThree.innerHTML = hoverThree;
  circleThree.style.backgroundImage = hoverBackground;
}
function onStaticThree () {
  staticTextThree.innerHTML = staticThree;
  circleThree.style.backgroundImage = staticBackground;
}

circleOne.onmouseover = onHoverOne;
circleOne.onmouseout = onStaticOne;

circleTwo.onmouseover = onHoverTwo;
circleTwo.onmouseout = onStaticTwo;

circleThree.onmouseover = onHoverThree;
circleThree.onmouseout = onStaticThree;   
</script>    
</div>

You can inspect element on the site and go to the console. It’ll tell you any errors your js is having in running. You can even interactively try code and see how it responds.

Interesting, the code in the console is the same I used to get when running in codepen.io

“Uncaught TypeError: Cannot set property ‘onmouseover’ of null”

But I don’t understand where I went wrong in the script?

<script src="script.js"></script> is the script file you posted?

the JS is before the html code, a browser renders from top to bottom, so the html should be rendered first. Move the <script> to before the body closing tag

1 Like