JQuery not working, possible source error?

Question

I am using Notepad++ and when I save and run this code in the browser the Jquery does not work.

<!DOCTYPE html>
<html>
<head>
<title>Result</title
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel='stylesheet' type='text/css' href='style.css'/>
    </head>
    <body>
    <script>
    $(document).ready(function() {
    $("div").click(function() {
        $("div").fadeout('slow');
    });
}); 
</script>
        <div></div>  
        </script>
    </body>
</html>

Style.css

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}

Also there is an extra closing </script> tag after your div and the function is fadeOut() not fadeout() JS is case sensitive — Lixus
– Lixus, Commented May 6, 2017 at 16:47

score 3 · Accepted Answer · 2017-05-06 17:01:15Z

3

Replace fadeout with fadeOut

EDIT: As comments suggested, your title tag needs to be closed too.

$(document).ready(function() {
  $("div").click(function() {
    $("div").fadeOut('slow');
  });
});

div {
  height: 100px;
  width: 100px;
  background-color: #FA6900;
  border-radius: 5px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div></div>

Also you can replace the inner $(div) with $(this) if you just want the clicked div to fadeout

$(document).ready(function() {
  $("div").click(function() {
    $(this).fadeOut('slow');
  });
});

div {
  height: 100px;
  width: 100px;
  background-color: #FA6900;
  border-radius: 5px;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div></div>

Collectives™ on Stack Overflow

JQuery not working, possible source error?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related