from the Head First JQuery book 1

officemanager2 · Feb 21, 2012

Hello: I've been working through the subject line book and it was going well until I came to the sections on Methods can change CSS. I cannot get the header border to change color when the click occurs?

I've double checked that I put the code in correctly but still cannot get the effect as the book describes.

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>class_test</title>

<link rel="stylesheet" link href="styles/test_style.css" type="text/css" />

</head>

<body>
<div id="header" class="no_hover"><h1>Header</h1></div>
<button type="button" id="btn1">Click to Add</button>
<button type="button" id="btn2">Click to Remove</button>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script src="scripts/my_test_scripts.js"></script>


</body>
</html>

CSS

Code:

@charset "utf-8";
/* CSS Document */


.hover{
	border:solid 3px;
	border-color: #C06;
}

.no_hover{
	border:solid 3px;
	border-color: #0F3;
}

J Query

Code:

$(document) .ready(function() {
		$("btn1") .click( function() {
			$("#header").addClass("hover");
			$("#header").removeClass("no_hover");
								   });
		
		$("btn2") .click( function() {
			$("#header").addClass("hover");
			$("#header").removeClass("no_hover");
								   });			
 });	

// JavaScript Document

Any suggestions are appreciated

vacunita · Feb 21, 2012

Your HTML shows no element btn1 anywhere. There's a button element who's name is btn1 however.

The jquery syntax $("btn1") looks for an element with that tag name such as:

<btn1></btn1>

Since no valid element is found it cannot apply the onclick event to it.

You can either target your button element using its id

$("#id")

or if you need to target it by name you can do:

$("button[name=btn1]")

That specifies a button element who's name exactly matches btn1

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

officemanager2 · Feb 21, 2012

Given the code out of the book the button has no ID or can i add the # tag to the jquery?

officemanager2 · Feb 21, 2012

Ok I added the '#' ID tag to the jquery and it worked. Thanks for your help I was really stuck as to what was going wrong there and when I look more carefully it is in the text in the book. Good insight for me as to how these small mistakes can bring things to a halt.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

from the Head First JQuery book 1

officemanager2

Technical User

vacunita

Programmer

officemanager2

Technical User

officemanager2

Technical User

Similar threads

Part and Inventory Search

Sponsor