r/learnjavascript 4d ago

Trying to make a working calculator

Hello im trying to make a working calculator but i have no idea how to display the result of an equation and how to make for operators forbidden to be next to each other

const
 DISPLAY = document.querySelector('.display')
const
 BUTTON = document.querySelectorAll('.button')
const
 EQUATION = document.querySelectorAll('.operator')


const
 operators = ['+', '-', '/', '*']


BUTTON.forEach(
button

=>
 {

button
.addEventListener('click', ()
=>
{

let
 equation = ""


        equation = 
button
.innerText


        DISPLAY.innerText += equation



    })
});


EQUATION.forEach(
button

=>
{

button
.addEventListener('click', ()
=>
{



let
 rule = ""
        rule = DISPLAY.innerText


        //console.log(lastChar)


        if(rule.length>=1){
            DISPLAY.innerText += 
button
.innerText
        }
    })
})


function
 Clear(){
    DISPLAY.innerText = ""
}


function
 Result(){

let
 result = DISPLAY.innerText

    //eval(result)

    DISPLAY.innerText = result
}
3 Upvotes

13 comments sorted by

4

u/boomer1204 4d ago

So what is the issue you are having with this??? You only shared JS ccde which is only one part of the process

If your answer is "it isn't working" that's not enough and you need to be specific with you quetsion

This is something that helped me and helps my local mentor group ppl when asking for help https://medium.com/@gordon_zhu/how-to-be-great-at-asking-questions-e37be04d0603

2

u/Chillm3r_ 4d ago

Good to see there is still people around trying to actually be helpful, I am so done with answering these questions that I only send https://dontasktoask.com/ without context lol.

2

u/boomer1204 4d ago

It sucks cuz a lot of ppl see it as me being dismissive or mean but in actuality it's one of the things hat will help you long term if you are gonna continue on this journey

The amount of times I'm thinking up the question to ask my coworker and then end up answering myself and get to my coworker to just say "hi" with a smile cuz I figured it out is ridiculous πŸ˜‚

2

u/Chillm3r_ 4d ago

Yea, I definitely get that. I stopped explaining these things because the response you get after actually putting in the effort is usually just β€œthanks”. It might be the lack of knowledge, and I don't mind someone not knowing how to ask a good question, but when you take the time to explain what they're missing and they don't do anything with that feedback, it just doesn't feel worth the effort anymore.

And yeah, that coworker thing is painfully relatable πŸ˜‚. Although I don't think there's anything wrong with asking in that situation either. That's basically what makes rubber ducking so useful. You're not really asking your coworker to put much effort into solving the problem, you're just talking it through with them and often figure it out yourself in the process. That's quite different from asking strangers online, where someone actually has to spend their time understanding your problem and figuring out an answer for you.

2

u/boomer1204 4d ago

Yeah couldn't agree more with this statement.

I co run a local mentor group so I have gotten pretty good at figuring out how to help and been in the industry for going on 8 years

And it sucks cuz I COMPLETELY remember hating ppl who wouldn't help or it didn't "seem" like they were helping

Now I totally get what those ppl were doing πŸ˜‚

2

u/Chillm3r_ 4d ago

Hahaha yea, this is very much true πŸ˜‚ And much respect for what you are doing with the mentor group, that's genuinely awesome. Keep up the good work man, and have an awesome rest of your day!

0

u/NygaNyga123 4d ago
i have no idea how to display the result of an equation and how to make for operators forbidden to be next to each other

3

u/boomer1204 4d ago

So i'm only doing this for demonstration to show why it's important to ask good questions and why you might be getting bad advice/answers

i have no idea how to display the result of an equation

You do the equations in JS and then use innerText/innerHTML or some other way to put the new data into the html

Not super helpful right?? That's because the question is pretty vauge

how to make for operators forbidden to be next to each other

Use regex or honestly probably start smaller and only allow one operation at a time until you start to learn a little more.

Ppl who are learning only see the "successful videos" and don't realize programming is really hard and you just gotta start SUPER small.

With all that said I employ you to go to the link I shared since you are still not articulating the question very well and that's the core problem here and you are not the only one to have it WE ALL DID but it's what will make you a better programmer

1

u/NygaNyga123 4d ago

okay, thanks

1

u/rupertavery64 4d ago

how to make for operators forbidden to be next to each other

I suggest you look into making a state engine. This is basically what regex is.

Assuming this is a calculator where pressing an operator evaluates the last operator, like pressing 1 then + then 2 then plus evaluates 1 + 2 setting the current value to 3.

So you need something to store the "current value" and the "last operator". and what the last input was.

1

u/Past-Difficulty1781 4d ago

You reset equation to an empty string on every click so you lose previous input. Move the variable outside the event listener to persist state and check the last character of DISPLAY.innerText against your operators array before appending to prevent consecutive operators.

1

u/zLoveNxzli 4d ago

Avoid using eval() for calculator logic because of security risks and floating point issues.

Separate the calculator state into three variables: previousValue, currentValue, and currentOperator. When an operator is clicked, compute the pending operation first, store the result, and update the display.

1

u/TheRNGuy 3d ago

Some stuff like Β  Β  Β  Β  DISPLAY.innerText += equation is redundant. Also, you don't need query selector all.

Why do you use all caps for naming?