New at home project

JavaScript
1

This is a snippet of something I’m working at at home to understand js better. There are several ‘out of scope’ error messages and I’m to much of a newbie to understand what I’m doing wrong. any help would be appreciated.

A Pen by scott (codepen.io)

2

Those values you are comparing frq to should be strings.

3

Thanks for taking the time. I changed them all to strings but I’m still getting “{a} used out of scope” messages. I’m lost!!

4

I’m not seeing that message. In fact, I’m not seeing any error messages. You’ll have to be a little more specific about where you are seeing these message and what they say.

5

At every instance of my var ‘total’, except where the var was first initialized is a message;
“{a} used out of scope”
Also, I can enter a number in the field, select a value, click on the add button I do not get any action from the js.

6

Ahh, I think you are referring to the ‘errors’ you are getting when you analyze your code. So in this case the analyzer is technically wrong. Even though you are using strict mode you can still use variable hoisting, which is what you are doing when you declare var total in the if statement. Because using var hoists the variable declaration to the beginning of the function you can then use total in the other else/if statements and at the end of the function. The analyzer is mistakenly treating total as if you declared it with let. So you can ignore those messages.

Your page is working for me. If I type in 100 with the select set to Weekly and click the Add button then the following text is displayed:

Your total monthly income is; 200

7

Thank you very much!!

8

I apologize for being such a newb, but… if you have the time, can you tell me how I can get the input amount to clear when I press ‘add’

9

Is it an input element?

If so, you can just set the value property on the input element to an empty string.

const input = document.querySelector('#input');
const submitBtn = document.querySelector('#submit');

submitBtn.addEventListener('click', () => {
  console.log(input.value)
  input.value = '';
})
10

Side note: I would suggest you put variable declarations at the top of the function or close to its usage. Having variable declarations inside if statements like you had doesn’t personally sit well with me.

It feels like the intent of the variable becomes unclear and relying on knowledge of hoisting rules is just adding unnecessary complexity. At first glance, it looks like the variable has a chance to become global. If you just use let and const they may help enforce some better declaration practices.

11

Thanks again guys. You all are a great help!!