Toggling Classes


#1


https://www.codecademy.com/en/courses/web-beginner-en-v6phg/1/2?curriculum_id=50a3fad8c7a770b5fd0007a1


Not sure what is wrong with the code. I assume nothing is wrong and the code should work, because it works in console and also makes sense to me. But when I click on "Save & Submit Code", then it throws out the error message.


$(document).ready(function() {
    $(text).click(function(){
        $(text).toggleClass("highlighted");
    });
});


#4

what is text ? is an id or a class ??


#5

text is a id so you need to use #
also here text

should be this as it should toggle what was clicked


#7

This code works:

$(document).ready(function() {
    $(text).click(function(){
        $(this).toggleClass("highlighted");
    });
});

#8

I am curious though -> shouldn't this code work as well? (I changed both $(text) to $(this).. see code below

$(document).ready(function() {
    $(this).click(function(){
        $(this).toggleClass("highlighted");
    });
});

#9

No it won't as,

you need to specify what you're clicking on if its which dv, class or id and then this will show exactly which one.

Otherwise you will be clicking over the whole page


#10

$(this).click(function(){

no it won't. why not?
because what is this now?

this===document //true

that is object HTMLDocument

what @zainabrawat already told you

Otherwise you will be clicking over the whole page

try this code

<html>
    <head>
		<title>Highlights</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   
<style>
#title {
    background-color: #C02942;
    border-radius: 5px;
    text-align: center;
    font-family: Verdana, Arial, Sans-Serif;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

#text {
    background-color: #0B486B;
    border-radius: 5px;
    text-align: center;
    font-family: Vivaldi, Cursive;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}      
      
</style>	
  </head>
	<body> 
        <div id="title" class="highlighted">I'm highlighted!</div>
        <div id="text" class='b'>Highlight me, too!</div>
  
	</body>
  <script>
   
$(document).ready(function() {
    $(this).click(function(){
     alert(this) 
     alert(this===document)
    $(this).toggleClass("highlighted");
     alert(this)  
      
    $('#text').css( "background-color", "red" );

    });
});

  
  </script>
</html>

you can click anywhere in the document and it'll run and change the background-color of #text

but in other hand
try this one

<html>
    <head>
		<title>Highlights</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>   
<style>
#title {
    background-color: #C02942;
    border-radius: 5px;
    text-align: center;
    font-family: Verdana, Arial, Sans-Serif;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

#text {
    background-color: #0B486B;
    border-radius: 5px;
    text-align: center;
    font-family: Vivaldi, Cursive;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}      
      
</style>	
  </head>
	<body> 
        <div id="title" class="highlighted">I'm highlighted!</div>
        <div id="text" class='b'>Highlight me, too!</div>
  
     <script>
      
$(document).ready(function() {
    $('#text').click(function(){
     alert(this);
    $(this).toggleClass("highlighted");
     alert(this)
    $('#text').css( "background-color", "red" );

    });
});
      </script> 
	</body>
  
</html>

here you have to click on #text then it'll work and change the background color .

also notice the alert.you can see the difference

hope you've understand now :slight_smile:


#11