I dont know what is wrong

JavaScript
1

So I am new to javascript and arrays are too complicated to learn so I am sticking to just single variables. I can’t tell whats wrong with the code. It should be running. Also are there any good free IDEs I can use to debug my code? Thanks.

<html>

  <body>
<canvas id="canvas" width="250" height="250" style="border: 2px solid black" onclick="onMouseClick(event)" onmouseup="onMouseUp(event)"></canvas>
  </body>

  <head>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  var cnv = document.getElementById('canvas');
  var ctx = cnv.getContext('2d');
  var size = 25;

var x1 = {};
var x2 = {};
var y1 = {};
var y2 = {};
var point_counter = {};
var dot = {};
pointer_counter = 0;
  
  function onMouseClick(event) {
    if (point_counter = 0) {
      point_counter = 1;
      x1 = event.offsetX;
      y1 = event.offsetY;
      ctx.beginPath();
      dot = ctx.arc(x1, y1, size / 4, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();
      //console.log("x coords: " + x1 + ", y coords: " + y1);
    } else {
      point_counter = 0;
      x2 = event.offsetX;
      y2 = event.offsetY;
      ctx.remove.dot();
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();

    }
  }

  function onMouseUp(event) {
    while (point_counter = 1) {
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(event.offsetX;, event.offsetY;);
      ctx.stroke();
    }
  }

</script>

  </head>


</html>
2

Hi dinomite07 welcome to the forum

If you want to have the best chance of the JavaScript to work, you should first make sure the HTML it is working with is good.

If you go to https://validator.w3.org/#validate_by_input and paste in all of your <html> to </html> (the entire page) and test it you will see there are quite a few problems with it.

Some may be more important to fix in terms of the JavaScript code, but try to fix the HTML as best you can.

3

code worked fine before, im just trying to fix the javascript

4

Actually you can see the error if you just open the console of your browser dev tools. As for free IDEs, the two probably most capable free text editors are Atom and VS Code… and with the right extensions you can get them pretty close to an actual IDE. Personally I prefer VS code as it’s faster and has better JS integration out of the box… I’m actually even using it at work myself.

As for the invalid HTML, I assume you placed the head after the body so that the #canvas element is available from the start? Now it’s common practice to put your scripts inside the body (which is perfectly valid too), preferably at the very end so that the entire document got rendered when the scripts run, and the user also doesn’t have to wait for the scripts to download until they can see the page.

5

i finished the program already in a different programming language, i have to use javascript or open gl and javascript seems easier.

the code was working before but adding another function, and some more variables broke the code. i looked through it and i dont know whats wrong

im am not worried about the html code

6

The thing is, modern browsers are pretty good at guessing what the HTML should actually look like and render it accordingly. It can still lead to hard to find bugs in the JS, e.g. when you’re trying to query for an element where the corresponding markup is not well-formed… so you should really pay attention to that.

1 Like
7

I fixed the html part. Has 2 errors which I am not sure how to fix. I really just need to fix the javascript.

<!DOCTYPE html>
<html lang="en">

  <head>
  
  <title>Grid</title>
  
    <body>
<canvas id="canvas" width="250" height="250" style="border: 2px solid black" onclick="onMouseClick(event)" onmouseup="onMouseUp(event)"></canvas>
  </body>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
  var cnv = document.getElementById('canvas');
  var ctx = cnv.getContext('2d');
  var size = 25;

var x1 = {};
var x2 = {};
var y1 = {};
var y2 = {};
var point_counter = {};
var dot = {};
pointer_counter = 0;
  
  function onMouseClick(event) {
    if (point_counter = 0) {
      point_counter = 1;
      x1 = event.offsetX;
      y1 = event.offsetY;
      ctx.beginPath();
      dot = ctx.arc(x1, y1, size / 4, 0, Math.PI * 2, true);
      ctx.closePath();
      ctx.fill();
      //console.log("x coords: " + x1 + ", y coords: " + y1);
    } else {
      point_counter = 0;
      x2 = event.offsetX;
      y2 = event.offsetY;
      ctx.remove.dot();
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();

    }
  }

  function onMouseUp(event) {
    while (point_counter = 1) {
      ctx.beginPath();
      ctx.moveTo(x1, y1);
      ctx.lineTo(event.offsetX;, event.offsetY;);
      ctx.stroke();
    }
  }

</script>

  </head>


</html>
8

In case you missed it, please read my first reply… the console says the problem is this line:

ctx.lineTo(event.offsetX;, event.offsetY;);

As in most programming languages with C-like syntax, a semicolon terminates a statement, so the engine assumes it ends with

ctx.lineTo(event.offsetX;

and hence complains about a missing ) after the argument list.

BTW wrapping the body inside the head is not right either… check out the section “Anatomy of a HTML document” here.

9

Well, no. To fix the JavaScript you really need to fix the HTML.

A good start would be to get the HTML to be more like

<html> 
  <head>
    <title> ... </title> 
  </head>
  <body> 
    ...
    <script> 
      ... 
    </script>
  </body>
</html>

Until that happens all bets are off on whether or not any JavaScript (or CSS for that matter) will work as expected.

10

fixed the html errors, i also added my other js code, its running but the functions arent being runned?

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>Grid</title>
  </head>

  <body>
    <canvas id="canvas" width="250" height="250" style="border: 2px solid black" onclick="onMouseClick(event)" onmouseup="onMouseUp(event)"></canvas>


    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      var cnv = document.getElementById('canvas');
      var ctx = cnv.getContext('2d');
      var size = 25;

      function drawGrid(cnv, size) {
        var box = {};
        var width = cnv.width;
        var height = cnv.height;
        var cols = Math.floor(width / size);
        var rows = Math.floor(height / size);

        for (var i = 0; i < rows; i++) {
          for (var j = 0; j < cols; j++) {
            if (!(i in box)) {
              box[i] = {};
            }

            box[i][j] = {
              x: i * size,
              y: j * size,
              width: size,
              height: size
            };

            ctx.rect.apply(ctx, Object.values(box[i][j]));
            ctx.stroke();
          }
        }

        return box;
      }
      drawGrid(cnv, size);
      //---------------------------------------------------
      var x1 = {};
      var x2 = {};
      var y1 = {};
      var y2 = {};
      var dot = {};
      var point_counter = 0;
      var delayInMilliseconds = 500; //1000 = 1 second

      function onMouseClick(event) {
        if (point_counter = 0) {
          point_counter = 1;
          x1 = event.offsetX;
          y1 = event.offsetY;
          ctx.beginPath();
          dot = ctx.arc(x1, y1, size / 4, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fill();
        } else {
          point_counter = 0;
          x2 = event.offsetX;
          y2 = event.offsetY;
          ctx.remove.dot();
          ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(x2, y2);
          ctx.stroke();

        }
      }

      function onMouseUp(event) {
        while (point_counter = 1) {
          ctx.beginPath();
          ctx.moveTo(x1, y1);
          ctx.lineTo(event.offsetX, event.offsetY);
          ctx.stroke();
          setTimeout(function() {}, delayInMilliseconds);
        }
      }

    </script>


  </body>

</html>
11

They are, but there’s a problem in your if and while conditions (the latter causing the page to hang completely): you’re assigning values to point_counter, and point_counter = 1 will always evaluate to true (and point_counter = 0 to false), so the while loop will run infinitely. For an equality check, use the === operator.

2 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.