CODEWITHSUNDEEP
javascriptjqueryhtml5-canvasdom-events
tasanoui
tasanoui

Reputation: 67

Are JavaScript events working if i am using jQuery?

I am new at creating applications using jQuery but I am quite familiar with Javascript. Well, what I am trying to do is use the Javascript getElementById in order to draw an image in html5 canvas. My code is:

Include the jQuery and JQuery mobile:

    <link rel="stylesheet" type="text/css" href="lib/jquery.mobile-1.0b1.min.css" />
    <script type="text/javascript" src="lib/jquery-1.6.1.js"></script>  
    <script type="text/javascript" src="lib/jquery.mobile-1.0b1.min.js"></script>

The code with problem:

     <div data-role="content">
      <!--//TO DO canvas drawing-->
      <canvas id="draw_area" width="295px" height = "390px"></canvas>
      ...

      <script type="text/javascript">
      var canvas = getElementById("draw_area");
      var context = canvas.getContext('2d');
      var map = new Image();

      map.src = "./imgs/home_screen1.png";
      map.onload = function (){
          context.drawImage (map, 0, 0);
      };
 </script>

I also noticed that I am not able to use the 

<body onload = "aFunction();">

not any other Javascript event like "onclick".

Am I doing something wrong?

Upvotes: 0

Views: 188

Answers (2)

Town
Town

Reputation: 14906

That should be:

var canvas = document.getElementById("draw_area");

Your script is running the getElementById line as soon as it is loaded, which is failing (due to the missing document.) and preventing the scripts on the rest of your page from executing.

Here's a quick demo to show you how script errors will prevent subsequent lines from executing.

Once that's fixed, as @swalk says, you should encapsulate that script so it runs on document.ready to keep things tidy.

Upvotes: 3

swalk
swalk

Reputation: 766

I suspect it's because you aren't using jQuery's dom ready function. Any JavaScript that manipulates/accesses the DOM should be done after DOM ready. Even if this isn't the issue, this is a common problem when people are new to JavaScript or jQuery.

Most jQuery code is usually found within this ready function: http://api.jquery.com/ready/.

For example, your code should be:

<script type="text/javascript">
$(document).ready(function() {
  var canvas = getElementById("draw_area");
  var context = canvas.getContext('2d');
  var map = new Image();

  map.src = "./imgs/home_screen1.png";
  map.onload = function (){
    context.drawImage (map, 0, 0);
  };
});
</script>

Upvotes: 2

Related Questions