Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

Status
Not open for further replies.
yumedoll

yumedoll

Active Coder
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.



JavaScript: 
 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.



JavaScript: 
 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++;

   }

  }

JavaScript: 
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 in question is here.
 
Sort by date Sort by votes
yumedoll said:
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.



JavaScript: 
 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.



JavaScript: 
 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++;

   }

  }

JavaScript: 
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 in question is here.
Click to expand...
Hi there,
For the laughs and giggles, try setting each variable separately, and then try running your site 😉
 
Upvote 0 Downvote
Antero360 said:
Hi there,
For the laughs and giggles, try setting each variable separately, and then try running your site 😉
Click to expand...
I tried that like this:
JavaScript: 
let mixamnt = 0;
let flouramnt = 0;
let sugaramnt = 0;
let cocoaamnt = 0;
let milkamnt = 0;
let eggamnt = 0;
let butteramnt = 0;
let redamnt = 0;
let vanillaamnt = 0;
In fact that was how the original script was like before I attempted declaring them together, still didn't work though😕
 
Upvote 0 Downvote
yumedoll said:
I tried that like this:
JavaScript: 
let mixamnt = 0;
let flouramnt = 0;
let sugaramnt = 0;
let cocoaamnt = 0;
let milkamnt = 0;
let eggamnt = 0;
let butteramnt = 0;
let redamnt = 0;
let vanillaamnt = 0;
In fact that was how the original script was like before I attempted declaring them together, still didn't work though😕
Click to expand...
where are you getting the rest of the values from?
 
Upvote 0 Downvote
yumedoll said:
I don't understand what you mean by that? I'm declaring new variables and initiating them as zero.
Click to expand...
it looks like somewhere down the line, your variables aren't updating correctly. For the laughs and the giggles, can you put a break point inside all of your case statements, put them right at the break statements, and run your code. Once you hit a break point check the values of all the variables inside of the case statement
 
Upvote 0 Downvote
Antero360 said:
it looks like somewhere down the line, your variables aren't updating correctly. For the laughs and the giggles, can you put a break point inside all of your case statements, put them right at the break statements, and run your code. Once you hit a break point check the values of all the variables inside of the case statement
Click to expand...
I thought there are already break points in my switch statement?
JavaScript: 
 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++;

   }

  }


EDIT: OOOOO NOW I UNDERSTAND, thanks! I'll give it a go

EDIT2:
Well looky looky here, there's everything. I added a breakpoint right after all the variables have been declared. And all amnt variables declared as intended!

But after unpausing the script, asking for mixamnt again returns "mixamnt is not defined" (⁠＠⁠_⁠＠⁠;⁠)
 

Attachments

  • Screenshot_2023-06-23-07-51-19-161.jpeg
    Screenshot_2023-06-23-07-51-19-161.jpeg
    193.7 KB · Views: 3
Last edited:
Upvote 0 Downvote
ananniamul said:
To fix this code, you need to declare the let variable x inside of the function foo(). This will make x a local variable, and it will be able to be accessed from within the function foo().

The following code will work as expected:

Code snippet
function foo() {
let x = 1;
console.log(x); // This will print 1
}

foo();

Use code with caution. Learn more
content_copy
I hope this helps! Let me know if you have any other questions.
Click to expand...
So you're saying I need to place the entire script within a function? Because last time I checked if u declare variables within a function, it stays within that function. But I need to use my variables throughout the entire script though. I don't mind doing it but I'm just asking so u can let me know if I'm misinterpreting u.
 
Upvote 0 Downvote
ananniamul said:
To fix this code, you need to declare the let variable x inside of the function foo(). This will make x a local variable, and it will be able to be accessed from within the function foo().

The following code will work as expected:

Code snippet
function foo() {
let x = 1;
console.log(x); // This will print 1
}

foo();

Use code with caution. Learn more
content_copy
I hope this helps! Let me know if you have any other questions.
Click to expand...
Hi there,
Quick question... what was the purpose of you adding the "use code with caution... " and link to Bard faq?
 
Upvote 0 Downvote
Status
Not open for further replies.

New Threads

Latest posts

Share this page

Buy us a coffee!

Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom