Using Jquery with html

Question

My jQuery is not working, i don't know what am i doing wrong.

The button is supposed to hide the paragraph and bring it back when i press it.
Have put the html and toggle.js code.
I am referencing the jquery library from a folder called js.

HTML

<DOCTYPE = html>
<html lang = "en">
<head>
    <meta charset = "utf-8">
    <script src=  "js/jquery-1.6.2.js"></script>
    <script src = "js/toggle.js"></script>

    <title>Jquery Example</title>
</head>
<body>
    <input type = "button" value = "Hide" id = "toggle_message"/>
    <p id = "message">You can see this paragraph</p>
</body>
</html>

TOGGLE.JS

$('#toggle_message').click(function() {

  var value = $('#toggle_message').attr('value');
  $('#message').toggle('fast');

  if (value == 'Hide') {
    $('#toggle_message').attr('value', 'Show');
  } else if (value == 'Show') {
    $('#toggle_message').attr('value','Hide');
  }
});

StudioTime · Accepted Answer · 2016-02-22 12:56:30Z

5

Try wrapping your code with $(function() {}); It likely can't access the DOM yet. e.g

$(function() {

    $('#toggle_message').click(function() {

      var value = $('#toggle_message').attr('value');
      $('#message').toggle('fast');

      if (value == 'Hide') {
        $('#toggle_message').attr('value', 'Show');
      } else if (value == 'Show') {
        $('#toggle_message').attr('value','Hide');
      }
    });
});

edited Feb 22, 2016 at 12:56

StudioTime

24.4k40 gold badges129 silver badges217 bronze badges

answered Feb 22, 2016 at 12:55

cstruter

1,09710 silver badges21 bronze badges

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

Comments

Punit Gajjar · Accepted Answer · 2016-02-22 12:56:00Z

0

Check this.

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    </head>
    <body>
        <input type = "button" value = "Hide" id="toggle_message"/>
        <p id = "message">You can see this paragraph</p>
    </body>
    <script type="text/javascript">
        $(document).ready( function () {
            $('#toggle_message').click(function() {        
                var value = $('#toggle_message').attr('value');
                $('#message').toggle('fast');

                if (value == 'Hide') {
                    $('#toggle_message').attr('value', 'Show');
                } else if (value == 'Show') {
                    $('#toggle_message').attr('value','Hide');
                }
            });
        });
    </script>
</html>

answered Feb 22, 2016 at 12:56

Punit Gajjar

5,0077 gold badges39 silver badges73 bronze badges

1 Comment

brayo Over a year ago

I was missing "$(document).ready( function () " on top of the script.Thanks guys.

Akshay Arora · Accepted Answer · 2016-02-22 12:56:05Z

0

Your click handler attaches to the DOM even before your elements are present in the DOM.

Enclose the code in your toggle.js like this:

$(function(){
  // your code here

});

Alternatively, you can place your script tag after the elements actually attach to the DOM, like:

<DOCTYPE = html>
<html lang = "en">
<head>
    <meta charset = "utf-8">
    <script src=  "js/jquery-1.6.2.js"></script>


    <title>Jquery Example</title>
</head>
<body>
    <input type = "button" value = "Hide" id = "toggle_message"/>
    <p id = "message">You can see this paragraph</p>

    <script src = "js/toggle.js"></script>
</body>
</html>

answered Feb 22, 2016 at 12:56

Akshay Arora

1,9551 gold badge16 silver badges31 bronze badges

Comments

Ashish · Accepted Answer · 2016-02-22 12:56:16Z

0

Try this.

<body>
    <input type = "button" value = "Hide" id = "toggle_message"/>
    <p id = "message">You can see this paragraph</p>
</body>


<script>
    $(function(){
        $('#toggle_message').click(function() {

            var value = $('#toggle_message').attr('value');
            $('#message').toggle('fast');

            if (value == 'Hide') {
              $('#toggle_message').attr('value', 'Show');
            } else if (value == 'Show') {
              $('#toggle_message').attr('value','Hide');
            }

        });
    });
</script>

answered Feb 22, 2016 at 12:56

Ashish

4982 gold badges8 silver badges24 bronze badges

Comments

Antonio Smoljan · Accepted Answer · 2016-02-22 12:58:15Z

0

Your code works fine as you can see here.

The reason why it dosen't in your case is beacuse the DOM is loaded after the javascript code runs so you need to wrap your code in document ready

$( document ).ready()

or a self invoking anonymous function or better yet include the script just before the closing body tag so it runs after the DOM is loaded

answered Feb 22, 2016 at 12:58

Antonio Smoljan

2,2071 gold badge15 silver badges11 bronze badges

Comments

Sandeep · Accepted Answer · 2016-02-22 13:04:35Z

0

Your code will work fine, just put your toggle.js code in a function like
$( document ).ready() { }

Your toggle.js should be-

$( document ).ready() {
 $('#toggle_message').click(function() {

  var value = $('#toggle_message').attr('value');
  $('#message').toggle('fast');

  if (value == 'Hide') {
    $('#toggle_message').attr('value', 'Show');
  } else if (value == 'Show') {
    $('#toggle_message').attr('value','Hide');
  }
 });
}

and always include Javascript files at the bottom of the page i,e before </body> tag.

answered Feb 22, 2016 at 13:04

Sandeep

1,5287 gold badges22 silver badges32 bronze badges

Collectives™ on Stack Overflow

Using Jquery with html

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related