JQuery doesn't work


#1

Hello,

I’m new to coding and new to Atom. I just wrote a script.js file and link it with my html. I tried to load it in Chrome but it doesn’t seem to work. Couldn’t figure out why… Hope you guys can help me with it, THANKS.

stylesheet.css

h1 {
  color: #6D9CAE;
  font-family: Futura;
  font-size: 40px;
  font-weight: lighter;
}

p {
  color: #54748B;
  font-family: Avenir;
  font-size: 20px;
  font-weight: bold;
}

div {
  background-color: #223C4A;
  height: 100px;
  width: 100px;
  border-radius: 100%;
}

.active {
  background-color: #a5b000;
}

script.js

$(document).ready(function(){
  $(div).hover(function() {
    $(div).addClass('.active')
  }, function() {
    $(div).removeClass('.active')
  });
});

Thanks


#2

This really isn’t an Atom issue.

But, I’ll help you out anyway. jQuery is a JavaScript library. That means it’s a blob of JavaScript written by other people, and isn’t part of JavaScript as standard. What you need to do is use a <script> tag like you did with your script.js, but with a file that points to jQuery, or an online link to a CDN providing it such as http://code.jquery.com/jquery-2.2.0.min.js


#3

Thanks so much!


#4

As Caffiend said, it is not an Atom problem, you are missing include the jQuery library. You need to include it right before your script.js
An example:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="script.js"></script>

Note:

  1. The example may not work if you run it from file, put https: in the src of jQuery, otherwise, it should work normally
  2. You still need to download jQuery and store it in your folders in case CDN failed (very very rarely), the fallback looks like this:

`

`