CODEWITHSUNDEEP
javascriptjquery
Jacob Bowman
Jacob Bowman

Reputation: 19

What does this block of JavaScript code do?

I am very new to JavaScript, jQuery and HTML etc. And I am supposed to implement this block of code (below) in a project and I am not quite sure what it is meant to do:

$(document).ready(function(){
  $("body").click(function(){
       $(this).hide();
  });
});

I'm assuming it simply hides any element that is clicked.

Upvotes: 0

Views: 77

Answers (5)

Rut Shah
Rut Shah

Reputation: 1278

It is pretty straight forward.

Sample HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  ...
</body>
</html>

Js:

$(document).ready(function(){ //executes when document model is ready
  $("body").click(function(){ //once u click anywhere on the page this function will be executed
       $(this).hide(); //hides everything between <body></body>
  });
});

Upvotes: 0

JayDM
JayDM

Reputation: 1186

That code will make it so that clicking on any element on the page will cause the body element to hide.

That is - unless the element has it's own onclick functionality assigned that stops the event from bubbling up to the body element's onclick by using the event.stopPropagation() function.

Note: You could also have a call to event.stopPropagation() within the event handler rather than just having it as the event handler.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("body").click(function() {
      $(this).hide();
    });
  });
</script>
<html>

<head>
  <title>Testing javascript function</title>
</head>

<body>
  <p>Here is one paragraph</p>
  <p>Here is a second paragraph</p>
  <p>Clicking on any element will hide the entire body element.</p>
  <input type="button" value="random button" onclick="event.stopPropagation()" />
</body>

</html>

Upvotes: 0

chrisbowman22
chrisbowman22

Reputation: 306

You are correct, it hides everything inside of the HTML element. It is also important to note that it is written using jQuery, which is a JavaScript library that has helper functions to make JavaScript more accessible to use.

Here is one line at a time:

Wait for the page to finishing loading in the browser (aka the DOM, or document object model):

$(document).ready(function(){

});

When the user fires the click event on the body element, run the following function:

$("body").click(function(){

});

Hide the body:

$(this).hide();

this (in this context) refers to the body element targeted in the previous line, this is the same as writing: `$('body').hide();

this refers to something different based on the context in which it is used. In this example it is used in an event, so it refers to the element that received that event (body). See W3Schools.

.hide() is a built in jQuery function that sets the element to display: none;

Upvotes: 1

Johnathon Hardy
Johnathon Hardy

Reputation: 170

It's simple, it puts an "on click" event on the body element. So that means, when you click the body element. It will hide everything in between the opening <body> and the closing </body> tags

<body>
    <!--everything in here will be hidden once body element is clicked-->
</body>

Upvotes: 0

Jujhar Singh
Jujhar Singh

Reputation: 373

$(document).ready is called when the page is ready for javascript to be executed. $("body") selects the body, the body of the document is where all of the visible HTML elements are shown. The click event is triggered when well, the element is clicked. $(this) selects the current element being operated on, which is the body. the hide function hides the selected element, which in this case is the body. So this code hides the body of the HTML page resulting in all visual elements being hidden.

Upvotes: 0

Related Questions