I am making a website for my computing project using jQuery and I have linked an external JavaScript file, all the other functions inside the JavaScript file work fine when I call them but when I try to use showNavBar it says it is undefined however in the file when I hover over it in sublime text, it says that it's defined in the JavaScript file.
When I put the function inside the homepage.html file it works fine so there isn't a problem with when it's being called or the function(s) themselves.
Here is the homepage.html where I am calling the definition:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Harry's Computer Shop</title>
<link rel="shortcut icon" href="images/icon.ico" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="javascript/functions.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<script>
$(document).ready(function() {
showNavBar();
var currentpage = "homepage";
curclass(currentpage);
$("#showhide").click(function(){
showhidesocial();
});
});
</script>
</head>
<body>
<div class="header">
<div>HARRY'S COMPUTER SHOP</div>
</div>
<ul id="navBar">
</ul>
<container class="feed">
<a class="twitter-timeline" data-width="250" data-height="1200" data-dnt="true" data-theme="dark" data-link-color="#E95F28" href="https://twitter.com/GHCHCS">HCS Twitter</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</container>
</html>
And here is where the function is defined in functions.js:
$(document).ready(function(){
function showNavBar() {
//Creates the navbar for each page
var out = "";
out += "<li><a class='menuitem' href='homepage.htm' id='homepage' title='Home'><span class='glyphicon glyphicon-home'></span> HOME</a></li>";
out += "<li><a class='menuitem' href='customerbuilds.html' id='customerbuilds' title='View Customer Builds'>CUSTOMER BUILDS</a></li>";
out += "<li><a class='menuitem' href='systembuild.html' id='systembuild' title='Custom System Builder'>SYSTEM BUILDER</a></li>";
out += "<li><a class='menuitem' href='indivpartpurchase.html' id='indivpartpurchase' title='Purchase Individual Parts'>INDIVIDUAL PART PURCHASE</a></li>";
out += "<li><a class='menuitem' href='forums.html' id='forums' title='Visit our forums'>FORUMS</a></li>";
out += "<li><a class='menuitem' href='javascript:void()' id='showhide' title='Show/Hide Social Media'>HIDE SOCIAL MEDIA</a></li>";
out += "<li><a class='menuitem2' href='javascript:void()' id='signup' title='Sign Up'><span class='glyphicon glyphicon-user'></span> SIGN UP</a></li>";
out += "<li><a class='menuitem2' href='javascript:void()' id='login' title='Login'><span class='glyphicon glyphicon-log-in'></span> LOGIN</a></li>";
$("#navBar").html(out);
}
var hidden=false;
function showhidesocial(){
// Shows/hides all containers with the class 'feed'
// Variables
// hidden: boolean - used to check if the feeds are hidden or not
// text: string - holds the data which replaces the current text on the button
// Algorithm
// if not hidden:
// fade out all elements with class 'feed'
// text <- "SHOW SOCIAL MEDIA"
// button text <- text
// hidden <- true
// endif
// else
// fade in all elements with class 'feed'
// text <- "HIDE SOCIAL MEDIA"
// button text <- text
// hidden <- false
// end else
if (hidden==false){
$(".feed").fadeOut(500);
var text = "SHOW SOCIAL MEDIA";
$('#showhide')[0].innerHTML = text;
hidden = true;
}
else {
$(".feed").fadeIn(500);
var text = "HIDE SOCIAL MEDIA";
$('#showhide')[0].innerHTML = text;
hidden = false;
}
}
function curclass(currentpage) {
// Changes the class of a tab to active if a user clicks on it
// Variables
// classes: string - contains all the elements that have the class name 'menuitem'
// currentpage: string - contains text that says what the current page is
// i: integer - key used in the for loop
// Algorithm
// classes <- get elemets with class name menuitem
// for each class:
// if class id == currentpage:
// replace class name with active
// end if
// end for
var classes = $(".menuitem");
for (i = 0; i < classes.length; i++) {
if (classes[i].id == currentpage) {
classes[i].className = classes[i].className.replace("menuitem", "active");
}
}
}
});
