JavaScript Why is the placement of the first declaration of my let variable being misinterpreted?

[yumedoll]

I have declared a few variables for a game I'm making about baking a cake and the variables will act as indicators of the amount of each ingredient to decide the outcome of the cake.

 let mixamnt = flouramnt = sugaramnt = chocoamnt = milkamnt = eggamnt = butteramnt = redamnt = vanillaamnt = 0;

But when running the site, I noticed that a function involving mixamnt wasn't firing. When I checked using the console by trying to log it, it returns mixamnt is not defined despite it being declared as 0 at the very beginning of the js file. Doing the same with all the other "amnt" variables returns the same issue.

It was only after checking my code editor, I noticed the error "You might be leaking a variable (flouramnt) here", I realized the whole thing was misinterpreting a mention of the variable within either one of these functions as the declaration of the variable for some weird reason.

  ondrop: function (event) {
    var draggableElement = event.relatedTarget;
    // do something when the draggable element is dropped into the dropzone
    var cls = draggableElement.classList;
    
  switch(true){
    
    case cls.contains("whisk"):
       draggableElement.style.zIndex = "30";
       mixing.pause();
    break;
    
    case cls.contains("flour"):
       draggableElement.style.transform = 'translate(0px, 0px)';
       draggableElement.style.webkitTransform = 'translate(0px, 0px)';
       ctx.drawImage(whitepowder, 150, 10);
       flouramnt++;
    break;
    
    case cls.contains('cocoa'):
       draggableElement.style.transform = 'translate(0px, 0px)';
       draggableElement.style.webkitTransform = 'translate(0px, 0px)';
       ctx.drawImage(chocopowder, 60, 10);
       chocoamnt++;
    break;
    
    case cls.contains('sugar'):
       draggableElement.style.transform = 'translate(0px, 0px)';
       draggableElement.style.webkitTransform = 'translate(0px, 0px)';
       ctx.drawImage(whitepowder, 250, 20);
       sugaramnt++;
    break;
    
    case cls.contains('milk'):
       draggableElement.style.transform = 'translate(0px, 0px)';
       draggableElement.style.webkitTransform = 'translate(0px, 0px)';
       ctx.drawImage(whitepowder, 80, 40);
       milkamnt++;
    break;
    
    case cls.contains('egg'):
       draggableElement.style.transform = 'translate(0px, 0px)';
       draggableElement.style.webkitTransform = 'translate(0px, 0px)';
       ctx.drawImage(egg, 100, 100);
       eggamnt++;
    break;
    
    case cls.contains('butter'):
       draggableElement.style.transform = 'translate(0px, 0px)';
       draggableElement.style.webkitTransform = 'translate(0px, 0px)';
       ctx.drawImage(butter, 300, 100);
       butteramnt++;
    break;
    
    case cls.contains('reddrop'):
       draggableElement.style.transform = 'translate(0px, 0px)';
       draggableElement.style.webkitTransform = 'translate(0px, 0px)';
       ctx.drawImage(dropred, 400, 100);
       redamnt++;
    break;
    
    case cls.contains('vanilla'):
       draggableElement.style.transform = 'translate(0px, 0px)';
       draggableElement.style.webkitTransform = 'translate(0px, 0px)';
       ctx.drawImage(vanilla, 100, 100);
       vanillaamnt++;
   }
  }

if(flouramnt > 1 && milkamnt > 1){
   ingredientbasis = true;
  
   if(mixamnt > 5 && chocoamnt == 0 && redamnt == 0){
     batter.style.backgroundImage = "url('cakebake/mixbatter/batterwhite.png')";
   }
  
 }

I've tried everything I could to fix this to no avail, syntax of the entire file seems fine to me. And attempting to place console.log() at the beginning of the file itself after the declarations works as expected. Giving me a nice clean "0" in the console on site load, but even then, directly typing the same variable name in the console returns the same error, despite that big juicy "0" that is supposed to be that very variable is right there.

Can anyone help me figure out what's going on? The website in question is here and the js file is here.

 

[Johna]

What happens if you declare all of the variables separately?

let mixamnt = 0;
let flouramnt = 0;
let sugaramnt = 0;
let chocoamnt = 0;
let milkamnt = 0;
let eggamnt = 0;
let butteramnt = 0;
let redamnt = 0;
let vanillaamnt = 0;

 

[yumedoll]

What happens if you declare all of the variables separately?

let mixamnt = 0;
let flouramnt = 0;
let sugaramnt = 0;
let chocoamnt = 0;
let milkamnt = 0;
let eggamnt = 0;
let butteramnt = 0;
let redamnt = 0;
let vanillaamnt = 0;

https://yumekawahanachi.neocities.org/cakebake/functionalint.js
I did, it didn't work though😕

Also I like ur pfp it's adorable

 

[Johna]

Are the variables chocoamnt and cocoaamnt supposed to be the same?

Also I like ur pfp it's adorable

Thanks, it's a picture of a bird I took in my garden, with the head enlarged.

 

[yumedoll]

Are the variables chocoamnt and cocoaamnt supposed to be the same?



Thanks, it's a picture of a bird I took in my garden, with the head enlarged.

Omg i just noticed that, let me fix it and give it a try tysm

EDIT: I fixed it but still no change 😐

 

[JavaJames]

This looks like it may be one of those tricky aspects of JavaScript...

let a = b = c = 0;

is executed right to left, ie it's equivalent to

c = 0;
b = c;
let a = b;

So b and c are created with global scope whereas a has block scope.

I can't see all of your code to understand the block structure, but it looks like you are trying to access your variables outside the block where your multiple assignment is, which means that the first one, and only the first one, is inaccessible.
Tha's also consistent with it not working when you split up the statement... now all the variables are limited to block scope.

 

[Johna]

This looks like it may be one of those tricky aspects of JavaScript...

let a = b = c = 0;

is executed right to left, ie it's equivalent to

c = 0;
b = c;
let a = b;

So b and c are created with global scope whereas a has block scope.

I can't see all of your code to understand the block structure, but it looks like you are trying to access your variables outside the block where your multiple assignment is, which means that the first one, and only the first one, is inaccessible.
Tha's also consistent with it not working when you split up the statement... now all the variables are limited to block scope.

That's what I thought at first, but that can't be the case, because @yumedoll said it still didn't work after declaring the variables separately.

 

[yumedoll]

This looks like it may be one of those tricky aspects of JavaScript...

let a = b = c = 0;

is executed right to left, ie it's equivalent to

c = 0;
b = c;
let a = b;

So b and c are created with global scope whereas a has block scope.

I can't see all of your code to understand the block structure, but it looks like you are trying to access your variables outside the block where your multiple assignment is, which means that the first one, and only the first one, is inaccessible.
Tha's also consistent with it not working when you split up the statement... now all the variables are limited to block scope.

The entire code is here, it's hosted this way

 

[yumedoll]

That's what I thought at first, but that can't be the case, because @yumedoll said it still didn't work after declaring the variables separately.

Yeh it didn't work either way

 

[yumedoll]

Help💀

 

[JavaJames]

I still think it’s a scope problem. Declaring the variables separately with let won’t fix it because they still have block scope.
Your problem references are in callback functions that will be called asynchronously sometime later. This means that they do not share the execution context of the place where they are declared. Making your variables global should fix the problem if I’m right.

 

[yumedoll]

I still think it’s a scope problem. Declaring the variables separately with let won’t fix it because they still have block scope.
Your problem references are in callback functions that will be called asynchronously sometime later. This means that they do not share the execution context of the place where they are declared. Making your variables global should fix the problem if I’m right.

I actually tried that, I declared it outside of the window.onload but it didn't work either. So I moved it back in.

 

[JavaJames]

Did you create them as global?

 

[yumedoll]

Did you create them as global - ie without using let?

Nope, I thought u needed to use let to declare something.

 

[JavaJames]

It’s an old trick. To be fair you shouldn’t use it nowadays. Compiling with strict will reject it now. Sorry. (Although you were using it implicitly with your multiple déclaré/assign)
You could try using the global window object, ie. window.mixamnt

 

[yumedoll]

It’s an old trick. To be fair you shouldn’t use it nowadays. Compiling with strict will reject it now. Sorry. (Although you were using it implicitly with your multiple déclaré/assign)
You could try using the global window object, ie. window.mixamnt

Hmmmmm.... Can you give me an example? I'm still not completely sure how I should use it

 

[JavaJames]

Global object

javascript.info

 

[JavaJames]

(Going offline for a few hours now) J

 

[yumedoll]

Global object

javascript.info

Hmmm it's worth a try ig

 

[JavaJames]

Good luck!