Smart questions
Smart answers
Smart people
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Member Login
Remember Me
Forgot Password?
Join Us!

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips now!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
Join Tek-Tips
*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

LINK TO THIS FORUM!

Add Stickiness To Your Site By Linking To This Professionally Managed Technical Forum.
Just copy and paste the
code below into your site.

Tek-Tips LinkedIn® Group

Partner With Us!

"Best Of Breed" Forums Add Stickiness To Your Site
Partner Button
(Download This Button Today!)

Feedback

"...I've gotten solutions within a day - it saved a lot of time and actually got me one ATTABOY from my boss..."
More...

Geography

Where in the world do Tek-Tips members come from?
Click Here To Find Out!

Tek-Tips Shirts!

Get Tek-Tips Swag
Get your
Tek-Tips Forums
SWAG here!
Home > Forums > Programmers > Web Development > Javascript Forum

from the Head First JQuery bookHelpful Member! 

thread216-1675691
Read More Threads Like This One
officemanager2 (TechnicalUser)
21 Feb 12 15:20
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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
Helpful Member!  vacunita (Programmer)
21 Feb 12 17:06
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 (TechnicalUser)
21 Feb 12 17:37
Given the code out of the book the button has no ID or can i add the # tag to the jquery?  
officemanager2 (TechnicalUser)
21 Feb 12 17:43
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.   
Read More Threads Like This One

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Back To Forum

Back To Javascript

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close