CODEWITHSUNDEEP
javascripthtml
Hobgoblin8
Hobgoblin8

Reputation: 7

Javascript not working in HTML

Sorry if this has been asked before but I couldn't find anything. I'm learning to code Javascript at Free Code Camp. When I try to use their code for my self...

<!DOCTYPE html>


<html lang="en">
<head>
 <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  <script>
   $(document).ready(function() {
$("#getMessage").on("click", function(){
  // Only change code below this line.
  $(".message").html("Here is the message");
  // Only change code above this line.
     });
   });
 </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>

 </body>
 </html>

It doesn't work as it should. It should change text when the button is pressed but it doesn't. What's going on?

Upvotes: 0

Views: 33669

Answers (5)

Paolo
Paolo

Reputation: 734

You've used jQuery but you should add jquery before using it:

<!DOCTYPE html>
<html>
<head>
    <title>your page</title>
    <!-- import jquery  -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <!-- import jquery  -->
</head>
<body>
    <!-- your code -->
    <!-- your code -->
</body>
</html>

Upvotes: 0

Ilyas karim
Ilyas karim

Reputation: 4812

This should work. I have tested it on my computer.

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
      $("#getMessage").on("click", function(){
        // Only change code below this line.
        $(".message").html("Here is the message");
        // Only change code above this line.
      });
    });
    </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>
  </body>
</html>

Upvotes: 0

A. Meshu
A. Meshu

Reputation: 4148

it look like you are using Boots and JQ - just import them to your code (:

Upvotes: 0

Ousmane D.
Ousmane D.

Reputation: 56413

It doesn't work as it should. It should change text when the button is pressed but it doesn't. What's going on?

you need to import:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Example:

<head>
 <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

Upvotes: 7

malejpavouk
malejpavouk

Reputation: 4445

I suppose you are using jquery, but missing the import...

Place this in head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Upvotes: 0

Related Questions