-1

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.

Mia
  • 63
  • 1
  • 2
  • 13
  • 4
    You forgot to import jQuery. – Pointy Feb 05 '17 at 17:14
  • or possibly jQuery.noConflict() is being used somewhere. Or code shown is inserted in page before jQuery,js loads. Your error is easy to search on web to find out all the various reasons it can occur – charlietfl Feb 05 '17 at 17:15
  • This can happen if jQuery isn't loaded before a script is called. Is the jQuery loaded at the head of the page, and is this script toward the bottom? – Donnie D'Amato Feb 05 '17 at 17:17

1 Answers1

2

you need to include

<script
  src="https://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>

in your code

Hemant
  • 1,900
  • 2
  • 15
  • 26