I just finished the JQuery lesson, and I wanted to practice writing some code so I downloaded TextMate for Mac and started with some really simple html so I could practice linking a javascript document to the html, but I can’t get the javascript to run. Here’s my html.
<!DOCTYPE html>
<html>
<head><title>Test</title></head>
<link type="text/css" rel="stylesheet" href="test.css">
<body>
<h3>test</h3>
<div id="george">test</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!--<script language = "javascript" type="text/javascript" src="js/jquery-2.1.4.js" ></script>-->
<script language="javascript" type="text/javascript" src="js/test.js" ></script>
<noscript>
For full functionality of this site it is necessary to enable JavaScript.
Here are the <a href="http://www.enable-javascript.com/" target="_blank">
instructions how to enable JavaScript in your web browser</a>.
</noscript>
</body>
</html>
I have JQuery and my javascript in a folder called ‘js.’ As you can see, I also tried loading JQuery from online. Neither worked, and I can’t get any code to run by putting it in between the <script></script>
. I found that <noscript>
stuff and threw it in so I could see if maybe my browser was the problem, but it only shows up when I open the html in TextEdit, so that makes me think the problem is with my javascript? Here’s the script I’m trying to link to.
$('h3').append("-success!");
$(document).ready(function(){
$('#george').click(function(){
$(this).fadeOut('slow');
});
$('div').css("color":"white");
});
after it didn’t work the first several tries, I put something above the $(document).ready()
because I figured maybe my document just wasn’t loading. Does anyone have any advice? Am I making an obvious mistake?
Here’s the CSS I’m using, it’s working fine.
body{
font-family:Arial,sans-serif;
font-color:#B00B1e;
background-color:#CCFFFF;
}
#george{
height: 100px;
width: 100px;
background-color: orange;
border-radius: 5px;
border: 3px solid black;
margin-left: 100px;
margin-top: 100px;
font-family:verdana,arial,sans-serif;
}