Simple JS Calculator - I need some help please!

JavaScript
1

Hi there!
I am new with JS and testing a super simple calculator with only 2 variables that add Apple and Cherries.
Can someone teach me how to calculate the total of apples and Cherries added and display the total number?

Here is the Codepen

Thank you
P.

2

I would expect that you want the total to update on every click, right?

So, I would have a function like “updateTotal” that gets the values for each and then puts that total, just like you update the value for cherries with countCherries.innerText = count. I would call that new function at the end of addApple and addCherries.

2 Likes
3

Your two buttons has the same ID, I would change that also.

UPDATE. Aslo your logic is not quite right I think - you have one variable count for both apples and cherries.

Try to click both buttons in a random order - you will see why it is a problem

2 Likes
4

I want to update the total on every click “Total result” which is the Total of Apple and Cherries.

Like this?
let updateTotal.innerText = addApple + addCherries;

May I ask you to share the line of code? I am super new with JS and do not understanding how to code;(

5

May I ask you to show the write syntax? i just want to learn as quick as possible.

6

I mean, it’s a common rule - id attribute must be unique. As long as you don’t have two elements on the page with the same id - it is fine.

I just refactored your code a little, but it is not best practice just show the direct solutions here.

If you will solve this yourself you will learn bunch of stuff, this is actually nice exercise for DOM beginners

1 Like
7

I’d rather guide you to the answer. People don’t tend to learn from cutting and pasting. And this is a learning platform.

You have this for cherries:

let countCherries = document.getElementById("count-cherries")

function addCherries() {
    count = count + 1
    countCherries.innerText = count
}

I’m saying to do something similar for “total”. First you create a reference to that spot in the DOM - you called it “countCherries” there, but maybe now it would be “total”. Then you have a function - instead of “addCherries”, you’ll have “updateTotal”.

Inside updateTotal, you get the values for cherries and store it in a variable. You have “countCherries.innerText” that can access that value, but remember that this is a string so you’ll have to convert it to a number. You’ll do the same for apples. Then you’ll add them together and put them in the “innerText” of your total.

1 Like
8

I also think that you want separate counts for apples and cherries. Right now they are both the same variable. Really, I don’t think you need the variable count - you already have the numbers stored on the DOM - why store it in two places. You could use countCherries.innerText to access that number directly and store it in a variable local to that function, instead of keeping a global count.

9

I went ahead and gathered bunch of articles about methods which may be used in this exercise(well, at least it is what I used):

You need to dive into this stuff sometimes, you need it even if you want ‘learn as quickly as possible’. Just asking people for showing right syntax will not help you to get better.

Also I will leave the link at DOM course from FCC youtube, which I used to get started with DOM:
here it is

3 Likes
10

Thank you! I agree… let me try and dive into this…

12

Yeah, there is. This is hard stuff, that’s why it pays well. But if you stick with it, you’ll get there.

Try what we’re suggesting and check back if it’s not working.

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.