OnMouseEvents Issue

I am new to coding and am having trouble with the onmouseover and onmouseout events. I am trying to make it so that when my mouse rolls over an element in my navbar it will turn pink. The issue is that everything that I have found uses Jquery and not Javascript. According to a debugger navBarTextReaction is not defined but then how do I go about defining it?
Do I have to set something equal to the function? I’m so confused. Help Please!
For some reason it is working here and it still isn’t working when I load it in the browser.

navBarVar = document.getElementById("navBar").classList;
function navBarTextReaction() {
    if(navBarVar.contains("makeWhite")) {
        navBarVar.remove("makeWhite");
    }
    else {
        navBarVar.add("makeWhite");
    }
    if(navBarVar.contains("makePink")){
        navBarVar.remove("makePink");
    }
    else {
        navBarVar.add("makePink");
    }
}
.background {
    background: #4F4F52; 
}
.navbar1 {
    background: #282727;
    shadow: 1em 1em #87B4CB;
    font-family: Patrick Hand SC;
    text-shadow: .01em .01em #171717; 
    font-size: 1.5em;
    text-align: center;
}
.makeWhite {
    color: #FFFFFF;
    font-weight: bold;
}
.makePink {
    color: #FBEBEB;
}
<!DOCTYPE html>
<html lang="en">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" target="_blank" rel="nofollow" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" target="_blank" rel="nofollow" href="styles.css">
        <link target="_blank" rel="nofollow" href="https://fonts.googleapis.com/css?family=Cardo|Great+Vibes|Patrick+Hand+SC|Quattrocento" rel="stylesheet">
        <script src="script.js"></script>
  </head>
<body> 
    <div class = "background">
    <div class = "container-fluid">
        <div class = "row">
            <div onmouseover = "navBarTextReaction()" onmouseout = "navBarTextReaction()" id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Home Page </div>
            <div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Chord Leading Chart </div> 
            <div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Note Game </div> 
            <div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Circle of Fifths </div> 
        </div> 
    </div>
    </div> 
</body> 
</html> 


<div onmouseover = “navBarTextReaction()” onmouseout = “navBarTextReaction()” id = “navBar” class = “navbar1 col-sm-3 makeWhite”> Home Page </div>

Add () after function names in your HTML and I also corrected the code to use the correct function name.

Lose all the duplicate id attributes and just use CSS classes and the :hover pseudo-class

.navbar1 {
  color: #fff;
  font-weight: bold;
}

.navbar1:hover {
  color: #FBEBEB;
  font-weight: normal;
}

<div class="navbar1 col-sm-3">Home Page</div>
<div class="navbar1 col-sm-3">Chord Leading Chart</div> 
<div class="navbar1 col-sm-3">Note Game</div> 
<div class="navbar1 col-sm-3">Circle of Fifths</div>

navBarTextReation =>navBarTextReaction()