Local variables not working. HELP!

So, I am working on this game, and I am trying to make a inventory box that you can put objects in, but the code wont run the variables if I put them into the function, so I have to put them outside the function and have a new function every time I want to make a new box. Can you guys please help me? Here is my code.

var groundX = 0;
var groundY = 0;

var mouseQ = 3;
var mouseT = "wood_tile";

var box1Q = 0;
var box1T = ""; 



draw = function() {
    
    var HBBox1 = function(x, y) {
    
              
    
        rectMode(CENTER);
        
        if (mouseX >= x - 15 && mouseX <= x + 15 && mouseY <= y + 15 && mouseY >= y - 15) {
            fill(230, 230, 230);
        }
        
        else {
            fill(204, 204, 204);
        }
        
        
        
        stroke(255, 255, 255);
        rect(x, y, 30, 30);
        
        
        
        mouseClicked = function() {
            
            if (mouseX >= x - 15 && mouseX <= x + 15 && mouseY <= y + 15 && mouseY >= y - 15 && mouseButton === RIGHT && box1T === mouseT) {
                box1Q += 1;
                mouseQ -= 1;
            }
            
            else if (mouseX >= x - 15 && mouseX <= x + 15 && mouseY <= y + 15 && mouseY >= y - 15 && mouseButton === LEFT && mouseT === "" && box1T !== "") {
                mouseQ = box1Q;
                mouseT = box1T;
                box1Q = 0;
                box1T = "";
                
            }
            
            else if (mouseX >= x - 15 && mouseX <= x + 15 && mouseY <= y + 15 && mouseY >= y - 15 && mouseButton === LEFT && box1T === "" && mouseT !== "") {
                box1Q = mouseQ;
                box1T = mouseT;
                
                mouseQ = 0;
                mouseT = "";
                
            }
            
            else if (mouseX >= x - 15 && mouseX <= x + 15 && mouseY <= y + 15 && mouseY >= y - 15 && mouseButton === RIGHT && mouseT !== "" && box1T === "") {
                
                box1T = mouseT;
                box1Q += 1;
                
                mouseQ -= 1;
            }
        
        };
        
        if (box1T === "wood_tile") {
            image(getImage("cute/WoodBlock"), x - 12, y - 17, 20, 20);
            fill(0, 0, 0);
            text(box1Q, x + 3, y + 13);
        }
    };
    
    
    
    var grass = function(x, y) {
    rectMode(CORNER);
    
    noStroke();
    
    if (mouseX >= x && mouseX <= x + 30 && mouseY >= y && mouseY <= y + 30) {
        fill(219, 219, 219);
    }
    
    else {
        fill(0, 163, 0);    
    }
    
    rect(x, y, 30, 30);    
    
    
};
    
    background(255, 0, 255);
    
    
    
     
     
    grass(300, 200);
    
    
    
    if (mouseQ === 0) {
        mouseT = "";    
    }
    
    for (var x = 0; x <= 600; x += 30) {
        for(var y = 0; y <= 400; y += 30) {
            grass(groundX + x, groundY + y);    
        }
    }
    
   HBBox1(300, 350);
   
   if (mouseT === "wood_tile") {
        image(getImage("cute/WoodBlock"), mouseX - 5, mouseY, 20, 20);
        fill(0, 0, 0);
        text(mouseQ, mouseX + 10, mouseY + 30);
    }
    
};

The box1Q and box1T wont work if I put them inside the function

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Ok, thank you. Sorry, I tried to get it in there, I guess I didnt have them in the right place

If you declare the variables inside the function they will be scoped to the function.

If you need to access them outside the function first you have to think about how you are accessing them. If it’s just accessing the values the function can return the values so they can be used elsewhere. If they need to be reassigned new values then the variables should likely not be scoped to the function but somewhere further up the scope.

Side note: It’s also likely that the draw function really should be a class (or a constructor function). It’s a fairly common design pattern for games to use OOP. But you will have to do some studying to re-write it as a class.

Try to understand the scope of the variables first.

Try passing your variables into the function as arguments when you invoke them.

What do you mean “As arguments?”

See this lesson here:

You may find it very helpful to go through the freeCodeCamp JavaScript challenges.

1 Like

Yes, as described in the link from JeremyLT, you can pass your variables as parameters into functions. Another option is pushing values into an array.
About your specific code, do you have an updated version?