Help with jQuery coding?


#1

So I'm just messing around in Sublime, trying to code a sub-par webpage out of boredom. I'm trying to make a div disappear when clicking on it, but it won't work. Can someone help?

Here's the jQuery code:

$(document).ready(function() {
	$('div').click(function() {
	$('div').hide();
	});
});

The HTML:

<!DOCTYPE html>
<html>
	<head>
		<title> HTML practice with Sublime </title>
		<link type='text/css' rel='stylesheet' href='css sublime practice 1.css' />
		<script type='text/javascript' src='jquery practice.js'> </script>
	</head>
	<body>
		<h1>insert something here</h1>
		<p>i am bored with nothing to do so i am coding a webpage whoopdee do</p>
		<div></div>
		<table>
			<thead>
				<th colspan=2>table header</th>
			</thead>
			<tbody>
				<tr>
					<td>row 1, cell 1</td>
					<td>row 1, cell 2</td>
				</tr>
				<tr>
					<td>row 2, cell 1</td>
					<td>row 2, cell 2</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

And finally, the CSS:

h1 {
	color: blue;
	font-family: Courier New;
}

p {
	color: purple;
	font-family: Courier New;
	font-weight: bold;
}

div {
	width: 50px;
	height: 50px;
	border: 3px solid green;
	color: green;
	font-family: Courier New;
	background-color: yellow;
	border-radius: 5px;
}

table {
	border: 2px solid red;
	border-radius: 3px;
	font-family: Courier New;
	color: red;
	background-color: purple;
}

Sorry if the answer is obvious, things seem to fly over my head sometimes.


#2

Hi Jay,

First, you're missing a link to jQuery. Add this before your currently existing <script> tag:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

Then, rename jquery practice.js to something without a space (it could be jquery-practice.js, if you like), or change the space in your <script> tag there to a %20. Browsers don't understand spaces in filenames like that, so you have to use certain % numbers instead for special characters, spaces included :slight_smile:


#3

Ah, it worked! Thank you!!