Javascript functions not being called

Question

My website uses a nav bar which toggles divs on and off to go to different "pages". Recently the buttons have stopped responding (nothing happens when clicked, and nothing appears in the console), and I have not been able to figure out why.

My nav bar is formatted like so:

<a href="#" id="videosButton">videos</a><br>
<a href="#" id="graphicButton">graphic design</a><br>
<a href="#" id="webButton">web design</a><br>

My pages are formatted like so:

<div id="videos" class="page">Videos page</div>

The JS is:

$('#videosButton').click(function () {
document.body.style.backgroundColor="rgb(192,57,43)"
$(".page").hide();
$('#videos').show();
});

for each button. My JS file is being loaded, and I can view it in the console, so it's not an issue with that. I have been struggling with this for hours and I am at a loss. Can anybody help me understand why the nav bar is not behaving as expected?

EDIT: I have moved my external JS and jQuery to just before the closing </body> tag, and the problem persists. I have put up the complete website at http://hdf.bl.ee/test/index.html if anyone thinks there is an issue not in the code I posted.

PS: Instead of `document.body.style.backgroundColor="rgb(192,57,43)"` you can use `$("body").css({backgroundColor: "rgb(192,57,43)"});` , it'll make you sleep better — Roko C. Buljan, Aug 24 '15 at 23:56
@RokoC.Buljan: In this case, there's zero reason to do that. — T.J. Crowder, Aug 24 '15 at 23:56
possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Phil, Aug 24 '15 at 23:56
You have to ask my doctor... probably for the same reason `$('#videos').show();` can be used instead of `document.getElementById("videos").style.display="block";` — Roko C. Buljan, Aug 24 '15 at 23:57
@RokoC.Buljan Please refrain from off-topic chatter in the comments. — Henry Floyd, Aug 25 '15 at 00:52
@HenryFloyd on [your website](http://hdf.bl.ee/test/index.html) (currently) I cannot see you moved your script before the closing `
` - it's still right in the `head` of your page and it's not wrapped in DOM ready function. — Roko C. Buljan, Aug 25 '15 at 01:52
@RokoC.Buljan I am not sure why you are unable to see the changes. Please try refreshing your browser. — Henry Floyd, Aug 25 '15 at 01:55
@HenryFloyd well, now it works - as you can see, since you also fixed your errors in JS with `favoriteMusic()` (instead of `favorite-music()`) functions etc. — Roko C. Buljan, Aug 25 '15 at 01:56

score 5 · Answer 1 · answered Aug 24 '15 at 23:54

5

Odds are that you're running that code before the element exists, and so $("videosButton") matches no elements, and so hooks up no handlers. Make sure the code is in a script tag after the markup for the elements in the HTML, or as a second-best approach, use jQuery's ready callback. Provided you do that, the function will get called:

$('#videosButton').click(function () {
document.body.style.backgroundColor="rgb(192,57,43)"
$(".page").hide();
$('#videos').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="videosButton">videos</a><br>
<a href="#" id="graphicButton">graphic design</a><br>
<a href="#" id="webButton">web design</a><br>
My pages are formatted like so:

<div id="videos" class="page">Videos page</div>

answered Aug 24 '15 at 23:54

T.J. Crowder

879,024
165
1,615
1,639

I have moved all my scripts to the very end of the , and the issue still persists, unfortunately. – Henry Floyd Aug 25 '15 at 00:16
1

@HenryFloyd: Then there's something going on that is not in your question. – T.J. Crowder Aug 25 '15 at 00:19
I have put up my website at http://hdf.bl.ee/test/index.html if you think there is an issue that is not in the code I posted. – Henry Floyd Aug 25 '15 at 00:50
@HenryFloyd: That's not how it works: SO isn't just for helping you, now, it's for helping others in the future. External links rot: As soon as the problem is fixed, that link becomes useless. Instead, create an [MCVE](/help/mcve) and post it to your question. – T.J. Crowder Aug 25 '15 at 07:03

score 0 · Accepted Answer · answered Aug 25 '15 at 02:07

0

It turns out the issue was something else entirely. Even though I moved my site's external JS file and the link to jQuery down to the </body> tag, they were being ignored because I had left one <script> in the <head> (the link to the Google API). When I moved that down with the other scripts, everything sudden began working. I am not sure why that was causing the other scripts to be ignored, but it solved my problem.

answered Aug 25 '15 at 02:07

Henry Floyd

97
9

1

This answer does not directly answers your question. I can see your question is titled `"Javascript functions not being called"`, you provided a [link-to-example](http://hdf.bl.ee/test/index.html) right into your question - And I can see you already have a **valid answer**. – Roko C. Buljan Aug 25 '15 at 02:14
None of the other answers solved my question. It turns out my entire JS file was being ignored because of its placement in my page. – Henry Floyd Aug 25 '15 at 02:20
Interesting that by applying the changes I've mentioned the JS code on your website started working just fine. - Another suggestion - Currently you simply change pages using .show() .hide() - so the URL is not changing like i.e: `http://hdf.bl.ee/test/index.html#videos` which would allow you to send a link to a friend and he'd open directly the `#videos` page. Explore JS `hash` anchors; How to read a hash from URL; How to use JS's History API and pushState and popState. – Roko C. Buljan Aug 25 '15 at 02:28
1

Another suggestion - to make it more mobile friendly (loads of data to load even if your elements/pages are not visible), you could create separate pages like videos.html etc - and after a click - push that page's content using AJAX (without page refresh!). – Roko C. Buljan Aug 25 '15 at 02:33
@RokoC.Buljan I had already moved the JS file and jQuery to the bottom of my page a full 55 minutes before you posted your suggestion to do so, and it did not fix the problem. The problem was leaving a separate script in the head. And I will research all of those things. Thank you for your time. – Henry Floyd Aug 25 '15 at 02:35

Javascript functions not being called

2 Answers2