Error - Jquery does not load function correctly

Asked

Viewed 130 times

2

The error appeared after I tried to add the . click(Function())

As you can see in the image above, the result is not as expected, which would be that H1 would be orange, with a fadein, and an onclick function.

Jquery:

$(document).ready(function(){


$('h1')
.css("color","#f66")
.hide()
.delay('1000')
.fadeIn("slow")
.text('Teste')
.click(function()){
    $('body').css("background","#C30")
    $('h1').css("color","#fff");


});
});

HTML:

<body>
<h1>Teste aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<a href="#">1</a>
<a href="#" class="link 2">1</a>    
<a href="#" id="link3">1</a>

I already checked, and the CDN is correct. Thanks in advance!

jquery

  • You’re not going the right way, buddy!

  • The error only happened after I added the part of . click(Function)(), because before it was working correctly, with fadein and color working

  • Well I honestly don’t understand what you want to do. But in the code you are full of }); leftover!

  • It’s just a test buddy, I’m just testing the use of Jquery, that’s why I put so much stuff, I’m going to edit and show the full code

2 answers

2

Just rearrange your script

initially set the color of H1 is inconsistent as it already enters Hidden.

   $(document).ready(function(){

        $('h1').css("color","#f66");
        $('h1').hide();
        $('h1').delay(1000);
        $('h1').fadeIn("slow");
        $('h1').text('Teste');

        $('h1').click(function(){
            $('body').css("background","#C30");
            $('h1').css("color","#fff");
       });

    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <body>
    <h1>Teste aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
    <a href="#">1</a>
    <a href="#" class="link 2">1</a>    
    <a href="#" id="link3">1</a>

1


Your problem is just a syntax error. There is an improper parenthesis on this line:

.click(function()){
                 ↑

The right thing would be:

.click(function(){

With the correction everything works as planned:

$(document).ready(function(){
   $('h1')
   .css("color","#f66")
   .hide()
   .delay('1000')
   .fadeIn("slow")
   .text('Teste')
   .click(function(){
       $('body').css("background","#C30")
       $('h1').css("color","#fff");
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Teste aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1>
<a href="#">1</a>
<a href="#" class="link 2">1</a>    
<a href="#" id="link3">1</a>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.