Why will this script not execute when all the code is in one script tag?

Question

I am trying to make a JavaScript version of buttons I initially created in Objective C. The approach involves creating two functions. The first draws five circles on a canvas and saves their centre coordinates. The second compares circle coordinates with coordinates of each mouse click and uses Pythagoras' theorem to detect whether an event happens within one of the five circles.

EDIT

Paragraph previously read

The problem is that circles produced by the drawing function are visible if each function is put in separate scripts. But somehow they vanish from the canvas altogether if I put both functions in the same script (i.e. by commenting out lines 52-53 in jsfiddle). The problem appears when I introduce the second function but I don't understand why.

Thanks to Bashu's answer two syntax issues have now been addressed successfully. The original question has been changed to reflect this. The code in jsfiddle shows both functions running together in the same script with function(e) displaying a clickRing where the mouse clicks on the canvas and correctly identifying each button. The code example now includes some missing mouse initialisation that had stopped mouse clicks from successfully drawing a clickRing.

Here is the second function.

<script>

const mouse            = document.getElementById('canvas');
var ctx2               = mouse.getContext('2d');
var x2;                                                  // click x 
var y2;                                                  // click y

var clickRing          = function(e){
    x2                 = e.offsetX - hCentre;
    y2                 = e.offsetY - vCentre;
    var clickRadius    = buttonRadius * 0.85;       // clear button boundary
// show all Mouse hits including misses and near misses
  ctx2.beginPath();    
  ctx2.arc(x2, y2, clickRadius * 0.85, 0, Math.PI*2);
  ctx2.strokeStyle     = "black";
  ctx2.stroke();
        for (i = 0; i < numberOfButtons; i++) {
        x1             = xButtonCoords[i];
        y1             = yButtonCoords[i];
    //                          ctx1 ctx2
        var xSquared   = Math.pow((x1 - x2),2);
        var ySquared   = Math.pow((y1 - y2),2);
    // find distance from button centre coordinates to clickpoint
        var hypotenuse = Math.sqrt(xSquared + ySquared);
        var distance   = parseFloat(hypotenuse).toFixed(0);
        if (distance < (buttonRadius - clickRadius)) {  
            alert("button : "+(i+1)+"\n"+ 
                  "distance from centre to Mouse : "+distance);
            }
        }
    }
        document.addEventListener('mousedown', clickRing);
</script>

Here is the entire code in jsfiddle.

I am new to Javascript and am searching here, here, here and here trying to learn more about DOM but so far nothing gives me a clue what to try next. I welcome suggestions. Thanks in advance.

score 2 · Accepted Answer · answered Feb 13 '20 at 18:30

The problem comes in the callback that is being passed to your mousedown event listener.

document.addEventListener('mousedown', function(e));

Firstly, this is incorrect syntax- you're declaring a function without a code block to be executed. function(e){} is a function declaration, function(e) is not. If I run your Jsfiddle with the Developer Console open, we can indeed see a Syntax Error being thrown:

Uncaught SyntaxError: Unexpected token ')'

This explains why the first half of your script does not execute when you put it together with the second half.

You can see this same error by simply opening the Developer Console while running your Js Fiddle, and I encourage you to make a habit of monitoring the Console to gain awareness of the other errors with your script.

Secondly, you have defined the clickRing function and you're not actually using it. document.addEventListener('mousedown', function(e){}) is correct syntax, but it does not refer to the function you've defined, which can be accessed with the variable clickRing. So you could instead do

document.addEventListener('mousedown', clickRing);

As to your other button click/hover appearance questions, they are unrelated and I'd encourage you to research them separately. I suspect you'll find that CSS will not work on the buttons, however, since they are drawn in the Canvas and they are not part of the DOM.

Otherwise, thank you, this was a well-written question.

I've updated the question in response to your answer. And thanks also for the compliment. — Greg, Feb 14 '20 at 07:32
Hi Greg! In fact your update is a bit counter-productive, since it's [recommended](https://meta.stackexchange.com/questions/222735/can-i-ask-only-one-question-per-post) to have one question per post. I understood the original question to be "why will my script not execute when all the code is in one script tag?" and I answered that, as well as "why is nothing happening when I click on a button?", as well as encouraging you to monitor the developer console. If your "ultimate objective" is to animate the circles, I suggest you make a question aimed at that, with a more descriptive title. — Bashu Naimi-Roy, Feb 14 '20 at 20:55
Bashu, you're right. Isolating these questions will make for more helpful answers. Hopefully this will help others as much as it has already helped me. Thanks a million. — Greg, Feb 15 '20 at 00:24

Why will this script not execute when all the code is in one script tag?

1 Answers1