function isn't being called in JavaScript graphics

Question

I was making a tic tac toe game in JavaScript graphics (I think) and I called a function to get the row of the click (the function that isn't working is the getRow function) and there isn't any output from the function

var WIDTH = 400;
var HEIGHT = 400;
setSize(WIDTH, HEIGHT);

var WINNING_LINE_WIDTH = 10;
var WINNING_LINE_COLOR = Color.red;
//high
var width = getWidth() / 3;
//thick
var height = getHeight() / 3;
//x != o
var shape = 0;
//1 2 3, as easy as A B C
var row = 0;

//ready, set, GO!!!!
function start(){
    grid();
    mouseClickMethod(click);
}
//lines
function grid(){

    var line1 = new Line(width, 0, width, getHeight());
    var line2 = new Line(width * 2, 0, width * 2, getHeight());
    var line3 = new Line(0, height, getWidth(), height);
    var line4 = new Line(0, height * 2, getWidth(), height * 2);
    add(line1);
    add(line2);
    add(line3);
    add(line4);
}
//notrick 

function click(e){
    var clicky = e.getY();
    getRow(clicky,row);
    println(row);
    println(clicky);
    println(height);
    println(height * 2);
    println(height * 3);
    
}

//row row row ur boat
function getRow(clicky, row){
    if(clicky < height){
        return row + 1;
    } if(clicky >= height && clicky <= height * 2 ){
        return row + 2;
    } else{
        return row + 3;
    } return row - 1;
    println("nothing");
}

user_7203455 · Answer

This code is working properly for what you wrote, but there are a few things you'll want to change to get your intended functionality.

First, functions' return values are returned through the array call itself. It seems that in your example code you're passing in "clicky" and "row" as arguments, and trying to set the value of those variables in the function. When you create parameters though, you're actually overwriting any other variables in the current scope with the same name and creating local variables instead, and you're just passing in the value of the variables n your function call. So this is what's happening in your program:

var row = 0;

function getRow(row) {
// defining row as a parameter creates a new local variable called "row"
  row = 1; // sets the "row" local variable to 1, but doesn't affect the "row" outside of the function
  console.log(row); // prints "1" because that's the value of the local var
}

getRow(row);
console.log(row); // prints 0 because that's the value of the global variable "row"

So what you'll want to do is pass in your cursor's y-value on click (which you already are doing! It saves it as the function parameter "clicky") but you do not need to pass in the row too. Then, you can just return an integer for your row value! (Instead of adding it to the global variable as you are right now) Then all you have to do is actually set row to that value, by setting row equal to the function call.

// variable values for example
var row = -1;
var height = 100 / 3; // each row will be ~33 pixels

function click(e){
    var clicky = e.getY();
    row = getRow(clicky); // set row to the value returned from getRow()!
}

//row row row ur boat
function getRow(clicky){
    if(clicky < height){
        return 1;
    } if(clicky >= height && clicky <= height * 2 ){
        return 2;
    } else{
        return 3;
    } return -1;
    println("nothing"); // also note: you can delete this as it will never run, as its after a return (which stops running the function)
}

// testing:
console.log(row); // before click (-1)
click({getY:()=>0}); // test object I made so it can get a y-value (it'll just be your click event in your code)
console.log(row); // after clicking at y = 0 (0)
click({getY:()=>40});
console.log(row); // after clicking at y = 40 (1)
click({getY:()=>90});
console.log(row); // after clicking at y = 90 (2)

Hope this helped! If you need clarification on anything just let me know.

function isn't being called in JavaScript graphics

1 Answers