My problem is that when I try to make an app with a lot of buttons, I end up with a ton of global variables, a ton of DOM selectors and an equal amount of click functions that while simillar, I don’t really understand how I could go about making a single function or how to approach it, surelly there has to be a much better way. I’ll post 2 examples, I achieve the result I want, but my code is not pretty, at all:
let count = 0;
const output = document.getElementById("output");
const gameResult = document.getElementById("gameResult");
const numbers = document.querySelectorAll(".each-number");
const numArray = Array.from(numbers);
const binaries = document.querySelectorAll(".binary-number");
const randomizer = document.getElementById("randomizer");
const oneHundredTwentyEight = document.getElementById("128");
const sixtyFour = document.getElementById("64");
const thirtyTwo = document.getElementById("32");
const sixteen = document.getElementById("16");
const eight = document.getElementById("8");
const four = document.getElementById("4");
const two = document.getElementById("2");
const one = document.getElementById("1");
oneHundredTwentyEight.addEventListener("click", function() {
document.getElementById("binary-128").textContent = "1";
addMyValue(128);
})
sixtyFour.addEventListener("click", function() {
document.getElementById("binary-64").textContent = "1";
addMyValue(64);
})
thirtyTwo.addEventListener("click", function() {
document.getElementById("binary-32").textContent = "1";
addMyValue(32);
})
sixteen.addEventListener("click", function() {
document.getElementById("binary-16").textContent = "1";
addMyValue(16);
})
eight.addEventListener("click", function() {
document.getElementById("binary-8").textContent = "1";
addMyValue(8);
})
four.addEventListener("click", function() {
document.getElementById("binary-4").textContent = "1";
addMyValue(4);
})
two.addEventListener("click", function() {
document.getElementById("binary-2").textContent = "1";
addMyValue(2);
})
one.addEventListener("click", function() {
document.getElementById("binary-1").textContent = "1";
addMyValue(1);
})
for (let i = 0; i < numArray.length; i++) {
numArray[i].addEventListener("click", function() {
this.classList.add("light");
})
}
function getRandom() {
return Math.floor(Math.random() * (128 - 1 + 1)) + 1;
}
randomizer.addEventListener("click", () => {
for (let i = 0; i < numArray.length; i++) {
numArray[i].classList.remove("light");
}
for (let i = 0; i < binaries.length; i++) {
binaries[i].textContent = "0";
}
gameResult.textContent = "";
count = 0;
output.textContent = getRandom();
})
const addMyValue = (num) => {
count += num;
console.log(parseInt(output.textContent));
if (count > parseInt(output.textContent)) {
gameResult.textContent = "Wrong value, you went over it."
count = 0;
output.textContent = "";
} else if (count === parseInt(output.textContent)) {
gameResult.textContent = "You got it right!";
output.textContent = "";
}
}
Another example of this:
var outputArr = [];
var firstValue;
var secondValue;
var resetValues;
var totalNumber = document.getElementById("totalNumber");
var buttons = document.getElementsByClassName("col-xs-3");
var one = document.getElementById("one");
var two = document.getElementById("two");
var three = document.getElementById("three");
var four = document.getElementById("four");
var five = document.getElementById("five");
var six = document.getElementById("six");
var seven = document.getElementById("seven");
var eight = document.getElementById("eight");
var Nine = document.getElementById("nine");
var divide = document.getElementById("divide");
var multiply = document.getElementById("multiply");
var subtract = document.getElementById("subtract");
var comma = document.getElementById("comma");
var add = document.getElementById("add");
var equals = document.getElementById("equals");
var C = document.getElementById("C");
var back = document.getElementById("back");
/**************************************************************
EVENTLISTENERS
***********************************************************/
zero.addEventListener("click", function(){
getValue(0);
});
one.addEventListener("click", function(){
getValue(1);
});
two.addEventListener("click", function(){
getValue(2);
})
three.addEventListener("click", function(){
getValue(3);
})
four.addEventListener("click", function(){
getValue(4);
})
five.addEventListener("click", function(){
getValue(5);
})
six.addEventListener("click", function(){
getValue(6);
})
seven.addEventListener("click", function(){
getValue(7);
})
eight.addEventListener("click", function(){
getValue(8);
})
nine.addEventListener("click", function(){
getValue(9);
})
comma.addEventListener("click", function(){
getValue(".");
/*****************************************************
OPERANDS AND SPECIAL KEYS
****************************************************/
})
add.addEventListener("click", function(){
operation("+");
})
multiply.addEventListener("click", function(){
operation("*");
})
subtract.addEventListener("click", function(){
operation("-");
})
divide.addEventListener("click", function(){
operation("/");
})
equals.addEventListener("click", function(){
equalResult();
})
C.addEventListener("click", function(){
clear();
})
back.addEventListener("click", function(){
backs();
})
/* Function getValue() pushes the value of each click into the outputArr and displays in the totalNumber(which is the calculator display) the chain of numbers pressed*/
function getValue(value){
outputArr.push(value);
totalNumber.innerHTML += value;
}
/*The operation function is triggered by pressing +, -, *, /, it creates a value variable that gets the numbers inside the outputArr and joins them into a string (removing then the commas and creating a single value), we then empty the outputArr, we display the operand sign in the display and store the value in the firstValue global variable.*/
function operation(operand){
var value = outputArr.join("");
outputArr = [];
totalNumber.innerHTML = operand;
return firstValue = Number(value)
}
/* Function clear (C key) simply resets everything */
function clear (){
totalNumber.innerHTML = " ";
outputArr = [];
return firstValue = 0;
}
/* The back function pops the last value we added and displays the outputArr as a joined string */
function backs (){
outputArr.pop();
totalNumber.innerHTML = outputArr.join("");
}
/* The equal result function assigns the value of the outputArr into the secondValue var, it then empties the outputArr and then it turns the string stored in secondValue into a number. Depending on the operand that is present in the display it performs one of the if/else possibilities. After that, the result in the display is stored in the outputArr as a number, also in the firstValue global var we store whatever number is in the display. Basically the result of firstValue and secondValue is stored as a firstValue again, so we re-use it. */
function equalResult(){
var secondValue = outputArr.join("");
outputArr = [];
secondValue = Number(secondValue);
if (totalNumber.innerHTML.indexOf("+") > -1) {
totalNumber.innerHTML = firstValue + secondValue;
} else if (totalNumber.innerHTML.indexOf("*") > -1){
totalNumber.innerHTML = firstValue * secondValue;
} else if (totalNumber.innerHTML.indexOf("/") > -1){
totalNumber.innerHTML = firstValue / secondValue;
} else if (totalNumber.innerHTML.indexOf("-") > -1){
totalNumber.innerHTML = firstValue - secondValue;
}
outputArr.push(Number(totalNumber.innerHTML))
console.log(outputArr)
return firstValue = totalNumber.innerHTML;
}
Any feedback is appreciated.
