creating calculator

let operatorsArray = document.querySelectorAll('.operator')
function bgColor(a){
let bgColorValue = window.getComputedStyle(a)
return bgColorValue.backgroundColor == "white"
}


console.log(operatorsArray.some(bgColor))
let operatorsArray = document.querySelectorAll('.operator')
function bgColor(a){
let bgColorValue = window.getComputedStyle(a)
return bgColorValue.backgroundColor == "white"
}


console.log(operatorsArray.some(bgColor))
87 Replies
cat
cat•5w ago
this is the code can someone tell me what did i do wrong
calculator.js:83 Uncaught TypeError: operatorsArray.some is not a function
calculator.js:83 Uncaught TypeError: operatorsArray.some is not a function
this is the error message im getting 😢
Jochem
Jochem•5w ago
it looks like you're declaring operatorsArray in a block using let, and it goes out of scope at the closing curly brace
Mannix
Mannix•5w ago
querySelectorAll does not return an array
cat
cat•5w ago
i used const this time and it still didnt work why not?
Mannix
Mannix•5w ago
you need to use a spread operator or array.from method
Jochem
Jochem•5w ago
That's also a very good reason 😄
cat
cat•5w ago
spread operator?
Mannix
Mannix•5w ago
[...]
Jochem
Jochem•5w ago
querySelectorAll returns a NodeList
cat
cat•5w ago
btw queryselectorall never returns an array? ohh
Mannix
Mannix•5w ago
let operatorsArray = [...document.querySelectorAll('.operator')]
Jochem
Jochem•5w ago
NodeLists are array-like, but not quite arrays
cat
cat•5w ago
wow i didnt know these stuff
Jochem
Jochem•5w ago
MDN Web Docs
Spread syntax (...) - JavaScript | MDN
The spread (...) syntax allows an iterable, such as an array or string, to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected. In an object literal, the spread syntax enumerates the properties of an object and adds the key-value pairs to the object being created.
Mannix
Mannix•5w ago
nodelist thats the word i was missing thank you Jochem 😄
cat
cat•5w ago
omg it seems its working it just returned false in console log lets see i was reading ur message😭
Jochem
Jochem•5w ago
sorry, I misread it again, please ignore 🙂
cat
cat•5w ago
btw it returns false everytime even if the condition is true
Jochem
Jochem•5w ago
getComputedStyle won't output "white", I think it just outputs rgb color values
cat
cat•5w ago
oh ya😭 some people told me to use getcomputedstyle instead of style how should i get the value of background color in string
Jochem
Jochem•5w ago
.style only returns the inline styles of an element why do you need to know the background color in this way? like, what are you trying to accomplish?
13eck
13eck•5w ago
Smells of the x/y problem, yeah?
ἔρως
ἔρως•5w ago
or someone trying to do something and going to it through the scenic route
Jochem
Jochem•5w ago
yeah, definitely smells like that. I've never really had the need to look at the computed style rules in Javascript, there's pretty much always a better, easier option like selecting by class or some data attribute
cat
cat•5w ago
ohh wait nvm actually i dont know how should i know the background color value do u know any better method except class
Jochem
Jochem•5w ago
I'm just confused why you need to know it in the first place
13eck
13eck•5w ago
The question still remains: what are you trying to do? IE, why do you need the background colour?
cat
cat•5w ago
ohh so wait
13eck
13eck•5w ago
We have been lol
cat
cat•5w ago
actually im making calculator so whenever i click on an operator button i want its background color turned white
13eck
13eck•5w ago
Can you please use complete sentences and not send tidbits one line at a time?
cat
cat•5w ago
okk
ἔρως
ἔρως•5w ago
:active in css should be enough?
cat
cat•5w ago
and when i click on any numbers button, i wanna know if any operators background color is white
13eck
13eck•5w ago
To what end? That's what we're trying to get at. Why do you need to know that?
cat
cat•5w ago
i wanted to do it through js but i will have to use css if theres no way
Jochem
Jochem•5w ago
so, the easiest way to do that is to just add a class to the button that turns it white, and check if that class is present later
13eck
13eck•5w ago
If you're trying to use that to see what operation to use don't use bg colour. Save the button press in a variable and read that
cat
cat•5w ago
so that i can calculate the first input and second input incase any operator is clicked oh
Jochem
Jochem•5w ago
yeah, do what Beck said
cat
cat•5w ago
ohk
13eck
13eck•5w ago
You should be saving state in JS, not via HTML/CSS
cat
cat•5w ago
what does saving state mean?
13eck
13eck•5w ago
something like:
let state = {
currentOperator: undefined,
numbersToOperateOn: []
}

const operatorButtonClicked = (ev) => {
state.currentOperator = ev.target.data.operation
}

const numberButtonClicked = (button) => {
numbersToOperateOn.push(button.valueAsNumber)
}
let state = {
currentOperator: undefined,
numbersToOperateOn: []
}

const operatorButtonClicked = (ev) => {
state.currentOperator = ev.target.data.operation
}

const numberButtonClicked = (button) => {
numbersToOperateOn.push(button.valueAsNumber)
}
So you have a global object that stores what's being used. The first function there changes the opeartor to +, -, /, or * as necessary (based on the button pressed) and the array holds the numbers that need be operated on. So if you type 15 + 4 the 15 is pushed into the array, the + is added as the operator and then 4 is pused to the array. You'll want to add more functionality to actually do the operation on each operatorButtonClicked—so the next time you click on, say, - it'll add 15 and 4, clear the array, and add 19 to the array I'd suggest using a switch statement to handle the operation of currentOperator
cat
cat•5w ago
okay
MarkBoots
MarkBoots•5w ago
Bit late, but just some additional info Instead of the spread operator you can also use Array.from() on the node list.
ἔρως
ἔρως•5w ago
i would take a different and easier approach a calculator is much more complicated than it seems
Mannix
Mannix•5w ago
hey i also mentioned that Marky 😡
ἔρως
ἔρως•5w ago
start out with 0 if the user types a number, replace it with the typed number, up until how manyh digits you wanna handle the user then presses an operator store the value in a variable
13eck
13eck•5w ago
☝️ @ἔρως
ἔρως
ἔρως•5w ago
it's an algorithm: a list of steps, but i forgot to put it on a list continuing
MarkBoots
MarkBoots•5w ago
sorry, i missed reading this
Mannix
Mannix•5w ago
don't worry i'm just messing with ya 😄
cat
cat•5w ago
im up until here
13eck
13eck•5w ago
They're typing. Be patient 😉
ἔρως
ἔρως•5w ago
actually i have an idea
cat
cat•5w ago
no i mean im at that step at the moment actually till the second variable is stored im in that step cant think of next step
ἔρως
ἔρως•5w ago
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
ἔρως
ἔρως•5w ago
here's my approach
cat
cat•5w ago
yes i remember i still remember how long it took u to make it 10-15 minutes big brain btw how many years of programming experience u had when u made this?
ἔρως
ἔρως•5w ago
its just an easy approach
cat
cat•5w ago
still
ἔρως
ἔρως•5w ago
same as now
cat
cat•5w ago
but u said u made it last year
ἔρως
ἔρως•5w ago
yes, but a year is 12 months and we're 4 months into the new year and that was 9-10 months into last year also, i started to program in may/june
cat
cat•5w ago
oh whatt sorry my cat was eating my mouse wire whatttt no way u started programming in may of 2023?
ἔρως
ἔρως•5w ago
no it was on a may/june
cat
cat•5w ago
😭 but which year 2021 2000 1900
ἔρως
ἔρως•5w ago
been programming for about 18 years
cat
cat•5w ago
oh now it makes sense
ἔρως
ἔρως•5w ago
it's just a matter of simplifying and being able to recognize all requirements
cat
cat•5w ago
wtf i just realized this 😭
ἔρως
ἔρως•5w ago
overcomplicating something incredibly simple
cat
cat•5w ago
yaa lol
ἔρως
ἔρως•5w ago
why didn't you just attach event listeners to the buttons? that would have been far superior and easier than reading background colors
cat
cat•5w ago
let lastButtonPressed
let inputOne
let operator
let inputTwo

function addition(a, c) {
return a + c
}
function subtraction(a, c) {
return a - c
}
function multiplication(a, c) {
return a * c
}
function divide(a, c) {
return a / c
}
function operate(t) {
switch (t) {
case "plus":
addition(inputOne, inputTwo)
break
case "divide":
divide(inputOne, inputTwo)
break
case "minus":
subtraction(inputOne, inputTwo)
break
case "multiply":
multiplication(inputOne, inputTwo)
break
}
}

numbersArray.forEach((item) => {
item.addEventListener("click", () => {

if (lastButtonPressed == "operator") {
result.textContent = ""
}

operatorsArray.forEach(item => {
item.style.backgroundColor = "lightcoral"
})

if (result.textContent == 0) {
result.textContent = item.dataset.value
}

else if (result.textContent != 0) {
result.textContent += item.dataset.value
}

lastButtonPressed = "number"

})
})

operatorsArray.forEach(item => {
item.addEventListener("click", () => {

lastButtonPressed = "operator"
console.log(lastButtonPressed)

inputOne = Number(result.textContent)
operator = item.dataset.value

item.style.backgroundColor = "white"
if (inputOne != "") {
inputTwo = result.textContent
}
})
})

calcPerform.addEventListener("click", () => {
if (inputOne != "") {
inputTwo = result.textContent
}

if (operator != '') {
let answer = operate(operator)
console.log(answer)
}

})
let lastButtonPressed
let inputOne
let operator
let inputTwo

function addition(a, c) {
return a + c
}
function subtraction(a, c) {
return a - c
}
function multiplication(a, c) {
return a * c
}
function divide(a, c) {
return a / c
}
function operate(t) {
switch (t) {
case "plus":
addition(inputOne, inputTwo)
break
case "divide":
divide(inputOne, inputTwo)
break
case "minus":
subtraction(inputOne, inputTwo)
break
case "multiply":
multiplication(inputOne, inputTwo)
break
}
}

numbersArray.forEach((item) => {
item.addEventListener("click", () => {

if (lastButtonPressed == "operator") {
result.textContent = ""
}

operatorsArray.forEach(item => {
item.style.backgroundColor = "lightcoral"
})

if (result.textContent == 0) {
result.textContent = item.dataset.value
}

else if (result.textContent != 0) {
result.textContent += item.dataset.value
}

lastButtonPressed = "number"

})
})

operatorsArray.forEach(item => {
item.addEventListener("click", () => {

lastButtonPressed = "operator"
console.log(lastButtonPressed)

inputOne = Number(result.textContent)
operator = item.dataset.value

item.style.backgroundColor = "white"
if (inputOne != "") {
inputTwo = result.textContent
}
})
})

calcPerform.addEventListener("click", () => {
if (inputOne != "") {
inputTwo = result.textContent
}

if (operator != '') {
let answer = operate(operator)
console.log(answer)
}

})
this is my javascript at the moment omg im getting it
ἔρως
ἔρως•5w ago
i would use a proper function for the event listeners you can then use the this variable, instead of fetching stuff outside the scope
cat
cat•5w ago
yeah something weird is happening im getting undefined when performing the operation (result) maybe scope issue like u said where should i make changes?
ἔρως
ἔρως•5w ago
good question make a codepen, get an answer
cat
cat•5w ago
yooo the problem was that the functions in the switch case was not returning anything now its fixed and my calculator is functioning
cat
cat•5w ago
obviously i need to do more editing the reset and del doesnt work at the moment but the operation finally works
ἔρως
ἔρως•5w ago
looks pretty
cat
cat•5w ago
thanks
cat
cat•5w ago
btw guys can u see something weird is happening when i click " = " repeatedly after doing a minus or divide operation why is that happening? should i be worried about that? also when i do any operations on the default value "0", i get 0 or NaN as the result thats weird