I'm having trouble linking my html code with my javascript code

Get Help jQuery
#1

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;
}
#2

This is the code i used in a windows 8.1 IE11 environment, with no errors in the HTML debugger.

<!DOCTYPE html>
<html>
	<head><title>Test</title>
<!--	<link type="text/css" rel="stylesheet" href="test.css"> </link> -->
	<style>
	body{
	font-family:Arial,sans-serif;
	font-color:#B00B1e;
	background-color:#CCFFFF;
}

div:hover {opacity: 0.5 }
h3:hover {background: yellow }
#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;
}
	</style>
	</head>
	<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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" ></script>
<!--		<script language="javascript" type="text/javascript" src="js/test.js" ></script>
-->
<script>
$(document).ready(function(){
$('h3').append("-success!");

$('#george').click(function(){
	$(this).css("background-color","white").fadeOut(4000)
	$(this).fadeIn(4000).css("background-color","orange")
	
//$('div').css("background-color","white");
	});
});
</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>
1 Like
#3

Thanks, I copied what you had and it still didn’t work, so I figured it was a browser thing. I opened the console in Chrome and it ran, so my guess is that the browsers I tried it in (Chrome and Safari) just both block local javasript until you open the console. Once I did that, I could load and reload it as much as I wanted.

Thanks again!

1 Like
#5