CODEWITHSUNDEEP
javascriptjquery
Mohammad Syed
Mohammad Syed

Reputation: 23

Javascript on ("click") not working

For some reason my JS on click isn't working. I have the id and class tagged.

<!DOCTYPE html>

<head>
   <link rel="stylesheet" type="text/css" href="css/style.css">
   <script type='text/javascript' src="js/index.js"></script>

   <script>
       $(document).ready(function(){
         alert("Hello World");
       });
   </script>
</head>


<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

And here's the Javascript.

  $(document).ready(function() {
     // Only change code below this line.
     $("#getMessage").on("click", function(){
         $(".message").html("Get message");
     });
     // Only change code above this line.
  });

I'd really appreciate some insight! Thank you very much. My hyphothesis is that the index.js file isn't linking properly but the src is definitely right.

Upvotes: 0

Views: 381

Answers (3)

Phani Kumar
Phani Kumar

Reputation: 141

$(document).ready(function() {
   
    $("#getMessage").on("click", function(){
      alert('You Clicked..!!');
    });
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

You are forget to include script, If no you may miss-aligned the script file,Please load it first.

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 20016

You Might be missing the jQuery script file. This works perfect for me.

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function () {
            alert("Hello World");
        });

        $(document).ready(function () {
            $("#getMessage").on("click", function () {
                $(".message").html("Get message");
            });
        });
    </script>
</head>

<body>
    <div class="container-fluid">
        <div class="row text-center">
            <h2>Cat Photo Finder</h2>
        </div>
        <div class="row text-center">
            <div class="col-xs-12 well message">
                The message will go here
            </div>
        </div>
        <div class="row text-center">
            <div class="col-xs-12">
                <button id="getMessage" class="btn btn-primary">
                    Get Message
                </button>
            </div>
        </div>
    </div>
</body>

</html>

Upvotes: 0

Flyer53
Flyer53

Reputation: 764

If you intend to use the functionality of a certain library - jQuery in this case - then you have to load this library before you use any of its functionality.

$(document).on("click", "#getMessage", function(){
      $(".message").html("Get message");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <div class = "row text-center">
    <h2>Cat Photo Finder</h2>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12 well message">
      The message will go here
    </div>
  </div>
  <div class = "row text-center">
    <div class = "col-xs-12">
      <button id = "getMessage" class = "btn btn-primary">
        Get Message
      </button>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions