Error - Jquery does not load function correctly

Question

Error - Jquery does not load function correctly

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

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

As you can see in the image above, the result is not expected, it 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've already checked, and the CDN is correct. Thank you in advance!

jquery

asked by anonymous 15.09.2018 / 22:49

2 answers

2

Just redo your script

Initially set the color of h1 is inconsistent since 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>Testeaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1><ahref="#">1</a>
    <a href="#" class="link 2">1</a>    
    <a href="#" id="link3">1</a>

15.09.2018 / 23:49

Error in Netbeans using Java: "error: diamond operator is not supported in -source 1.5" Using the switch function in C ++ [duplicate]

score 1 · Accepted Answer

Your problem is just a syntax error. There is an undue parenthesis in this line:

.click(function()){
                 ↑

The correct one would be:

.click(function(){

With the fix everything works as expected:

$(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>Testeaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1><ahref="#">1</a>
<a href="#" class="link 2">1</a>    
<a href="#" id="link3">1</a>