I am just starting with JavaScript and for my first project I am trying to display a working calculator using JS, HTML and CSS. I am just one step away from it finally handling easy operations but for some reason my "solver"-function does not work when hitting the Enter-button.
I already tried out all the functions in a "test.js" console.logging the results and everything worked perfectly. But for some reason it won't work when combining it with the eventListener and trying to display it within the textfield. I also tried simpler functions and displaying only variables in the textfield which works. It is just the solver-function that won't.
I will attach my code - most of you would definitely code a calculator much different and especially much shorter than the way I did it but I am proud I got this far, so please don't judge me too harshly! :D
First the declaration of functions which worked perfectly in the test.js. The solver was originally designed to return the previous 4 functions in a nested way but I thought this might be the problem, so I changed it.
function adds(num1, num2) {
return num1 num2;
};
function subs(num1, num2) {
return num1-num2;
};
function muls(num1, num2) {
return num1*num2;
};
function divis(num1, num2) {
return num1/num2;
};
//Creates an array with string elements.
function createArray(string) {
let array = [];
for(let element of string) {
array.push((element));
}
return array;
};
//Returns an array where numbers are joint within one element (e.g. '1','2' becomes '12').
function joinNums(array) {
let numArray = [''];
let index = 0;
for (i=0; i < array.length; i ) {
if (isNaN(parseInt(array[i]))) {
index ;
numArray.push(array[i]);
index ;
numArray[index]=[''];
continue;
}
numArray[index] =numArray[index] array[i];
}
return numArray;
};
//Returns an array where all elements with numbers in them are changed to proper numbers instead of strings.
function makeNums(array) {
let numArray = [''];
let index = 0;
for (i=0; i < array.length; i ) {
if (isNaN(parseInt(array[i]))) {
index ;
numArray.push(array[i]);
index ;
numArray[index]=[''];
continue;
}
numArray[index] = parseInt(array[i]);
}
return numArray;
};
//Calculates the array that is provided and returns a single number as solution.
function operate(array) {
let solution = array[0];
for(let iOp = 1; array.length >= iOp; iOp=iOp 2) {
if(array[iOp] === ' ') {
solution = adds(solution, array[iOp 1]);
}
if(array[iOp] === '-') {
solution = subs(solution, array[iOp 1]);
}
if(array[iOp] === '*') {
solution = muls(solution, array[iOp 1]);
}
if(array[iOp] === '/') {
solution = divis(solution, array[iOp 1]);
}
}
return solution;
};
//Takes a string (meant to be the value of a textfield) and returns the solution by calling all previously declared helper functions.
function solver(string) {
let cr = createArray(string);
let jo = joinNums(cr);
let ma = makeNums(jo);
let op = operate(ma);
return op;
};
Now on to the input field and hitting the enter-button:
//This is the enter-button
let enter = document.getElementById("enter");
//This is the textfield where calculations are entered. The textfield is then meant to be changed to display the operations result.
let textfield = document.getElementById("resultLn");
//The eventlistener.
enter.addEventListener("click", () => {
textfield.value = solver(textfield.value);
});
CodePudding user response：
Hi,
Your calculator code works well, If there was a problem, checkout your html.
I test with some operations and it works well. If there any operation doesn't work, please type this operation to help you
//This is the enter-button
let enter = document.getElementById("enter");
//This is the textfield where calculations are entered. The textfield is then meant to be changed to display the operations result.
let textfield = document.getElementById("resultLn");
//The eventlistener.
enter.addEventListener("click", () => {
textfield.value = solver(textfield.value);
});
function adds(num1, num2) {
return num1 num2;
};
function subs(num1, num2) {
return num1-num2;
};
function muls(num1, num2) {
return num1*num2;
};
function divis(num1, num2) {
return num1/num2;
};
//Creates an array with string elements.
function createArray(string) {
let array = [];
for(let element of string) {
array.push((element));
}
return array;
};
//Returns an array where numbers are joint within one element (e.g. '1','2' becomes '12').
function joinNums(array) {
let numArray = [''];
let index = 0;
for (i=0; i < array.length; i ) {
if (isNaN(parseInt(array[i]))) {
index ;
numArray.push(array[i]);
index ;
numArray[index]=[''];
continue;
}
numArray[index] =numArray[index] array[i];
}
return numArray;
};
//Returns an array where all elements with numbers in them are changed to proper numbers instead of strings.
function makeNums(array) {
let numArray = [''];
let index = 0;
for (i=0; i < array.length; i ) {
if (isNaN(parseInt(array[i]))) {
index ;
numArray.push(array[i]);
index ;
numArray[index]=[''];
continue;
}
numArray[index] = parseInt(array[i]);
}
return numArray;
};
//Calculates the array that is provided and returns a single number as solution.
function operate(array) {
let solution = array[0];
for(let iOp = 1; array.length >= iOp; iOp=iOp 2) {
if(array[iOp] === ' ') {
solution = adds(solution, array[iOp 1]);
}
if(array[iOp] === '-') {
solution = subs(solution, array[iOp 1]);
}
if(array[iOp] === '*') {
solution = muls(solution, array[iOp 1]);
}
if(array[iOp] === '/') {
solution = divis(solution, array[iOp 1]);
}
}
return solution;
};
//Takes a string (meant to be the value of a textfield) and returns the solution by calling all previously declared helper functions.
function solver(string) {
let cr = createArray(string);
let jo = joinNums(cr);
let ma = makeNums(jo);
let op = operate(ma);
return op;
}; <input type="text" id="resultLn">
<button id="enter">Enter</button>CodePudding user response：
You do not use let statement at the for cycles i operand (at function joinNums, makeNums).
In addition at function operate, you can use switch.