jQuery selector hide function

Question

This is the content of my HTML file:

<!DOCTYPE html>
            <!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
    <head>

        <meta http-equiv="author" content="Chris" />
        <link href="jquery.css" type="text/css" rel="stylesheet" />
</script>
    <script src="js/jquery-3.3.1.min.js">
</script>
<script>
    $(document).ready(function() {
        $('#message').hide();
    });
</script>
    </head>
    <body>
        <p id="message">Hello World!</p>
    </body>
</html>

I have a file named jquery.js, which is a minified version of jQuery 3.3.1, and it is saved in the folder js in which my HTML file and CSS file are located. In this document, I am trying to hide the paragraph with the ID of message using the hide() function, but when I open up the file in a Google Chrome browser, the paragraph is still there.

Note: Clearly, I am new to JavaScript and the implementation of a jQuery library.

looks like your jquery file path is wrong. Can you try with <script src="jquery-3.3.1.min.js"> if your html and jquery file both are in same folder — Bhushan Kawadkar
– Bhushan Kawadkar, Commented Jul 20, 2018 at 5:25
Updated code: <!DOCTYPE html> <!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards --!> <head> <meta http-equiv="author" content="Chris" /> <link href="jquery.css" type="text/css" rel="stylesheet" /> </script> <script src="jquery-3.3.1.min.js"> </script> <script> $(document).ready(function() { $('#message').hide(); }); </script> </head> <body> <p id="message">Hello World!</p> </body> </html> It still does not work. — Xyce Bedet
– Xyce Bedet, Commented Jul 20, 2018 at 5:27

Xyce Bedet · Accepted Answer · 2018-07-20 05:59:53Z

1

OK. So I figured out what was going on. I am learning JavaScript from a book, and the book said to include the version number and the "min" extension into the HTML file when you are linking it to the JavaScript file, even if that it not the correct filename. Since my jQuery library is jquery.js, I just removed the version number and the "min" extension. Once I did that, the paragraph went away, per the hide() function. Thank you all for responding. This was just a failure to communicate between the book and my brain.

<!DOCTYPE html>
    <!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
    <head>
        <meta http-equiv="author" content="Chris" />
        <link href="jquery.css" type="text/css" rel="stylesheet" />
  <script src="jquery.js"></script>
  <script>
  $(document).ready(function() {
    $('#message').hide();
    console.log($.fn.jquery);
  });
  </script>
</head>
<body>
  <p id="message">Hello World!</p>
</body>
</html>

edited Jul 20, 2018 at 5:59

answered Jul 20, 2018 at 5:56

Xyce Bedet

438 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Louys Patrice Bessette Over a year ago

The file name has nothing to do with it... But since you changed it both places (in code and the file itself)... Maybe the issue was loading it.

Louys Patrice Bessette Over a year ago

The console is your best friend. It has a tab where you can inspect each file load success. And many things.

Xyce Bedet Over a year ago

The console actually pointed it out for me. Originally, I had the filename and file extension as "js/jquery-3.3.1.min.js" even though the actual filename and extension was "jquery.js" When I ran the console, it told me that the file "js/jquery-3.3.1.min.js" did not exist. I thought you had to put the version of the library and the the "min" part is as per some standard. Once I changed the value in the SRC attribute to what the file was called, the code worked.

Louys Patrice Bessette Over a year ago

The file name is just a string. Name it stupid-thing.js and it will work. It's a text file without any proprietary editor code inside... Just plain text. As opposed to MS Word files. (example).

Xyce Bedet Over a year ago

Thank you again for your help, @LouysPatriceBessette

|

Louys Patrice Bessette · Accepted Answer · 2018-07-20 05:29:22Z

0

A couple blindish mistakes... Assuming your jQuery lib is loaded.

<!DOCTYPE html>
<!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
<html> <!-- MISSING -->
<head>
  <meta http-equiv="author" content="Chris" />
  <link href="jquery.css" type="text/css" rel="stylesheet" />
  <!--/script--> <!-- WHAT? Commented out -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <script>
  $(document).ready(function() {
    $('#message').hide();
  });
  </script>
</head>
<body>
  <p id="message">Hello World!</p>
</body>
</html>

A missing and an extra tags.
Tell me if it solves the weird thing.

answered Jul 20, 2018 at 5:29

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

5 Comments

Louys Patrice Bessette Over a year ago

Ok... Others are focusing on your jQuery lib loaded. Make that test in console: console.log($.fn.jquery);... It should output the version number.

Xyce Bedet Over a year ago

Good eye on the extra </script> tag. I removed that. I put in the <html> tag on the second line. I reloaded the page, both in Chrome and Firefox, and I can still see the paragraph.

Xyce Bedet Over a year ago

I downloaded the newest jQuery library from the jQuery website, put the contents in a Notepad file, and saved with a .js extension. I'm not sure what you mean by "test in console." Like I said, I'm brand new to JavaScript.

Louys Patrice Bessette Over a year ago

Ok... Console... Here is Xyce... Xyce, here is Console. -- Be sure to explore ;) A tutorial quickly found.

Louys Patrice Bessette Over a year ago

Read about code indentation also. It helps quick markup reading for a human.

Yogesh Patel · Accepted Answer · 2018-07-20 05:33:09Z

0

<!DOCTYPE html>
<html>
            <!-- The above DOCTYPE declaration tells the browser that this page conforms to HTML 5 standards -->
    <head>
        <meta http-equiv="author" content="Chris" />
        <link href="jquery.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#message').hide();
        });
    </script>
    </head>
    <body>
        <p id="message">Hello World!</p>
    </body>
</html>

Modify your HTML as above. I have remove extra </script> and add missing <html>.

answered Jul 20, 2018 at 5:33

Yogesh Patel

8382 gold badges13 silver badges26 bronze badges

Comments

Darshana Pathum · Accepted Answer · 2018-07-20 05:40:49Z

0

The problem is you had a extra `</script>` tag. Just remove it.

 <html>
    <head>
       <meta http-equiv="author" content="Chris" />
       <link href="jquery.css" type="text/css" rel="stylesheet" />

       <script src="js/jquery-3.3.1.min.js"></script>
       <script>
           $(document).ready(function() {
               $('#message').hide();
           });
       </script>
   </head>
   <body>
      <p id="message">Hello World!</p>
   </body>
 </html>

answered Jul 20, 2018 at 5:40

Darshana Pathum

6695 silver badges12 bronze badges

Collectives™ on Stack Overflow

jQuery selector hide function

4 Answers 4

14 Comments

5 Comments

Comments

The problem is you had a extra `</script>` tag. Just remove it.

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

14 Comments

5 Comments

Comments

The problem is you had a extra </script> tag. Just remove it.

Comments

Your Answer

Sign up or log in

Post as a guest

Related

The problem is you had a extra `</script>` tag. Just remove it.