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.

 

[yumedoll]

(Going offline for a few hours now) J

It worked thank you!!!

 

[JavaJames]

Glad I could help. 🙂