CODEWITHSUNDEEP
javascriptjqueryhtml
estebes
estebes

Reputation: 1

jQuery alert does not work

I've tried for several hours know to make this bit of jquery code work but I just can't find what I did wrong with it. The equivalent in normal javascript works just fine. What is the problem? 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
      alert("HI");
      $(document).ready(function(e){
        alert("Hi");
        $("#button5").click(function(event)
        {
          alert("HI");
        });
      });
    </script>
  </head>
  <body>
    <link rel="stylesheet" type="text/css" href="ezcap.css">
    <div class="container">
      <div id="sidebar">
        <div id="sbheader"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5"></div>
      </div>
      <div id="header">lol</div>
      <div id="footer">feg</div>
    </div>
  </body>
</html>

Upvotes: 0

Views: 4051

Answers (6)

JGallardo
JGallardo

Reputation: 11383

Your problem was including your code in that script tag for jQuery.

Change to this:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="ezcap.css">
  </head>
  <body>

    <div class="container">
      <div id="sidebar">
        <div id="sbheader"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5"></div>
      </div>
      <div id="header">lol</div>
      <div id="footer">feg</div>
    </div>

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

    <script>
      alert("HI");
      $(document).ready(function(e){
        alert("Hi");
        $("#button5").click(function(event)
        {
          alert("HI");
        });
      });
    </script>
  </body>
</html>

Not a problem but you do not need the type="text/javasript". See: Do you need text/javascript specified in your <script> tags?

And it is better to have your scripts at the bottom so that your content can load faster. See: If I keep JavaScript at bottom or keep JavaScript in <head> inside document.ready, are both same thing?

Your <link> for CSS needed to be inside your <head>

Upvotes: 0

Dharmesh
Dharmesh

Reputation: 26

The JS script reference line of code should end and actual JQuery code should be enclosed under separate script tags.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
    <script type="text/javascript">
      alert("HI");
      $(document).ready(function(e){
        alert("Hi");
        $("#button5").click(function(event)
        {
          alert("HI");
        });
      });
    </script>
  </head>
  <body>
    <link rel="stylesheet" type="text/css" href="ezcap.css">
    <div class="container">
      <div id="sidebar">
        <div id="sbheader"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5">abcd</div>
      </div>
      <div id="header">lol</div>
      <div id="footer">feg</div>
    </div>
  </body>
</html>

Upvotes: 0

Jean-Pierre
Jean-Pierre

Reputation: 9

You are trying to call the jQuery library while also implementing your code snippet here:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

You should be first loading the jQuery library and then implementing your code snippet like this:

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  alert("HI");
  $(document).ready(function(e){
    alert("Hi");
    $("#button5").click(function(event){
      alert("HI");
    });
  });
</script>

The reasoning behind this is because you cannot call the script attribute to load a library and then define some code in the same tag, you need to:

  1. Load the script
  2. Declare your code

Hope that helps!

Upvotes: 0

Shaun K.
Shaun K.

Reputation: 391

You can't put a script in a tag that has a src attribute. You need to call the jQuery library in one script tag and then put your actual script in another.

Try this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
  alert("HI");
  $(document).ready(function(e){
    alert("Hi");
    $("#button5").click(function(event)
    {
      alert("HI");
    });
  });
</script>

Upvotes: 3

jpcanamaque
jpcanamaque

Reputation: 1069

Try this: 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
     <script>
      alert("HI");
      $(document).ready(function(e){
        alert("Hi");
        $("#button5").click(function(event)
        {
          alert("HI");
        });
      });
    </script>
  </head>
  <body>
    <link rel="stylesheet" type="text/css" href="ezcap.css">
    <div class="container">
      <div id="sidebar">
        <div id="sbheader"></div>
        <div id="button2"></div>
        <div id="button3"></div>
        <div id="button4"></div>
        <div id="button5"></div>
      </div>
      <div id="header">lol</div>
      <div id="footer">feg</div>
    </div>
  </body>
</html>

Upvotes: 1

Mritunjay
Mritunjay

Reputation: 25882

Problem is here 

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">

//js code

</script>

Here in your script tag you are giving a source and some code also, You should write separate script tags for both, see bellow

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>

<script>
//js code

</script>

Upvotes: 2

Related Questions