I've looked everywhere, but I can't figure out my mistake because I'm so new to javascript. The problem is that when the page loads for the first time, there are no errors and all the javascript works fine, but when I click 'home' an error is printed out to the console and the part of javascript under '$(document).ready' doesn't work anymore.
Here's the error:
Uncaught TypeError: $ is not a function
at <anonymous>:2:7
at n.t.SnapshotRenderer.n.assignNewBody (turbolinks.self-c5acd7a….js?body=1:6)
at n.t.SnapshotRenderer.n.replaceBody (turbolinks.self-c5acd7a….js?body=1:6)
at turbolinks.self-c5acd7a….js?body=1:6
at n.t.Renderer.t.renderView (turbolinks.self-c5acd7a….js?body=1:6)
at n.t.SnapshotRenderer.n.render (turbolinks.self-c5acd7a….js?body=1:6)
at Function.t.Renderer.t.render (turbolinks.self-c5acd7a….js?body=1:6)
at e.t.View.e.renderSnapshot (turbolinks.self-c5acd7a….js?body=1:6)
at e.t.View.e.render (turbolinks.self-c5acd7a….js?body=1:6)
at r.t.Controller.r.render (turbolinks.self-c5acd7a….js?body=1:6)
(anonymous) @ VM6247:2
t.SnapshotRenderer.n.assignNewBody @ turbolinks.self-c5acd7a….js?body=1:6
t.SnapshotRenderer.n.replaceBody @ turbolinks.self-c5acd7a….js?body=1:6
(anonymous) @ turbolinks.self-c5acd7a….js?body=1:6
t.Renderer.t.renderView @ turbolinks.self-c5acd7a….js?body=1:6
t.SnapshotRenderer.n.render @ turbolinks.self-c5acd7a….js?body=1:6
t.Renderer.t.render @ turbolinks.self-c5acd7a….js?body=1:6
t.View.e.renderSnapshot @ turbolinks.self-c5acd7a….js?body=1:6
t.View.e.render @ turbolinks.self-c5acd7a….js?body=1:6
t.Controller.r.render @ turbolinks.self-c5acd7a….js?body=1:6
(anonymous) @ turbolinks.self-c5acd7a….js?body=1:6
(anonymous) @ turbolinks.self-c5acd7a….js?body=1:6
This happens every time I either click on one of the articles or the home page, but does not happen for other pages like projects and contact.
Here is my javascript code:
<script type="text/javascript">
$(document).ready(function() {
console.log("called");
$(".fa-times").click(function() {
$(".sidebar_menu").addClass("hide_menu");
$(".sidebar_menu").addClass("opacity_one");
$(".bodywrapper").removeClass("push");
$(".bodywrapper").addClass("pushback");
});
$(".toggle_menu").click(function() {
$(".sidebar_menu").removeClass("hide_menu");
$(".sidebar_menu").removeClass("opacity_one");
$(".bodywrapper").addClass("push");
$(".bodywrapper").removeClass("pushback");
});
});
var num = 1;
function back() {
if (num == 1) {
$("#project-1").hide();
$("#project-3").show();
$("#project-2").hide();
$("#a-1").hide();
$("#a-3").show();
$("#a-2").hide();
num = 3;
} else if (num == 2) {
$("#project-3").hide();
$("#project-1").show();
$("#project-2").hide();
$("#a-1").show();
$("#a-2").hide();
$("#a-3").hide();
num--;
} else if (num == 3) {
$("#project-1").hide();
$("#project-3").hide();
$("#project-2").show();
$("#a-3").hide();
$("#a-2").show();
$("#a-1").hide();
num--;
}
}
function resize() {
if ( $(window).width() > 955) {
$("#a-1").show();
$("#a-2").show();
$("#a-3").show();
$("#project-1").show();
$("#project-3").show();
$("#project-2").show();
} else {
$("#a-1").show();
$("#a-2").hide();
$("#a-3").hide();
$("#project-1").show();
$("#project-3").hide();
$("#project-2").hide();
}
}
function myfunction() {
if (num == 1) {
$("#project-1").hide();
$("#project-3").hide();
$("#project-2").show();
$("#a-1").hide();
$("#a-3").hide();
$("#a-2").show();
num++;
} else if (num == 2) {
$("#project-3").show();
$("#project-1").hide();
$("#project-2").hide();
$("#a-1").hide();
$("#a-2").hide();
$("#a-3").show();
num++;
} else if (num == 3) {
$("#project-1").show();
$("#project-3").hide();
$("#project-2").hide();
$("#a-3").hide();
$("#a-2").hide();
$("#a-1").show();
num = 1;
}
}
</script>
Also, when I comment this out, the errors go away, so the problem is in this code, I just can't figure out where.