jQuery not working - Project Build a Personal Portfolio Page

JavaScript
1

Greetings,

I’m working towards my second project “Build a Personal Portfolio Webpage”. I’ve been trying to apply what was learned so far in the lessons, and I can’t get my jQuery to work. I was testing it with what was shared in a previous lesson:

$(document).ready(function() {
$("#contact").css(“color”, “red”);
});

My project can be found here: https://codepen.io/kagejarvis/project/editor/ArBVLQ

Any suggestions?

Thanks,

Rich

2

I’m on my phone right now, so i can’t review all the code, but first, see if you are targeting the right element, do you have the #contacts id on any element?

Second, try to put your script tag at the end of
The code, after your body enclosing tag. This is because it only starts working after the html document is ready, if your JS happens to load before your body, then it might never target your #contacts element.

3

Thanks for the reply. I did confirm that the id=“contact” is within the “h1” tag and corresponds with the “#contact” in the script. I put the script code after and it still doesn’t seem to be working.

5

Hi,
sorry if you can not understand my english but the call of your script element must be inside your body element at the end not after your body element things like this

</head>
<body>
.....
.....
....
<!-- here you put the call of your JS file -->
<script src="xxx"></script>
</body>
</html>```
6

I must not be adding the library correctly.

At the bottom of my pen project (I’m still confused how to add the external source properly with a project), I have this code:

script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js”>
$(document).ready(function() {
$("#connect").css(“color”, “red”);
});
/script>
/body>

/html>

7

Thank you- I made sure the script line was before /body> - I don’t think I am loading the library correctly - still not working. Any other ideas?

8

The following is what you currently have:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    $(document).ready(function() {
      $("#connect").css("color", "red");
    });
  </script>

You need two separate script elements.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="scripts/index.js"></script>
9

Thank you! That was it!