So I am building a calculator with history but don't really know where to start. I have a full working calculator but I want to change it so that it shows the history of operations a person does. I want the history to remain there for all different operations the user makes. Plus, per example if a user does 1+2+3 I want the full operation to appear: 1+2+3. If the user does a second operation like 2/8+2 I want that the previous operations shows up too: 1+2+3
2/8+2
I already have a space for the history in my html file. Here's the link for the fiddle: https://jsfiddle.net/q9pa0tns/
This is my javascript code so far:
(function() {
"use strict";
// Shortcut to get elements
var el = function(element) {
if (element.charAt(0) === "#") { // If passed an ID...
return document.querySelector(element); // ... returns single element
}
return document.querySelectorAll(element); // Otherwise, returns a nodelist
};
// Variables
var viewer = el("#viewer"), // Calculator screen where result is displayed
equals = el("#equals"), // Equal button
nums = el(".num"), // List of numbers
ops = el(".ops"), // List of operators
theNum = "", // Current number
oldNum = "", // First number
resultNum, // Result
operator; // Batman
// When: Number is clicked. Get the current number selected
var setNum = function() {
if (resultNum) { // If a result was displayed, reset number
theNum = this.getAttribute("data-num");
resultNum = "";
} else { // Otherwise, add digit to previous number (this is a string!)
theNum += this.getAttribute("data-num");
}
viewer.innerHTML = theNum; // Display current number
};
// When: Operator is clicked. Pass number to oldNum and save operator
var moveNum = function() {
oldNum = theNum;
theNum = "";
operator = this.getAttribute("data-ops");
equals.setAttribute("data-result", ""); // Reset result in attr
};
// When: Equals is clicked. Calculate result
var displayNum = function() {
// Convert string input to numbers
oldNum = parseFloat(oldNum);
theNum = parseFloat(theNum);
// Perform operation
switch (operator) {
case "plus":
resultNum = oldNum + theNum;
break;
case "minus":
resultNum = oldNum - theNum;
break;
case "times":
resultNum = oldNum * theNum;
break;
case "divided by":
resultNum = oldNum / theNum;
break;
// If equal is pressed without an operator, keep number and continue
default:
resultNum = theNum;
}
// If NaN or Infinity returned
if (!isFinite(resultNum)) {
if (isNaN(resultNum)) { // If result is not a number; set off by, eg, double-clicking operators
resultNum = "You broke it!";
} else { // If result is infinity, set off by dividing by zero
resultNum = "Look at what you've done";
el('#calculator').classList.add("broken"); // Break calculator
el('#reset').classList.add("show"); // And show reset button
}
}
// Display result, finally!
viewer.innerHTML = resultNum;
equals.setAttribute("data-result", resultNum);
// Now reset oldNum & keep result
oldNum = 0;
theNum = resultNum;
};
// When: Clear button is pressed. Clear everything
var clearAll = function() {
oldNum = "";
theNum = "";
viewer.innerHTML = "0";
equals.setAttribute("data-result", resultNum);
};
/* The click events */
// Add click event to numbers
for (var i = 0, l = nums.length; i < l; i++) {
nums[i].onclick = setNum;
}
// Add click event to operators
for (var i = 0, l = ops.length; i < l; i++) {
ops[i].onclick = moveNum;
}
// Add click event to equal sign
equals.onclick = displayNum;
// Add click event to clear button
el("#clear").onclick = clearAll;
// Add click event to reset button
el("#reset").onclick = function() {
window.location = window.location;
};
}());
Any suggestions would be highly appreciated, thank you so much.
For starters
https://jsfiddle.net/mplungjan/b2cagn8h/
....
history = el("#history"), // history
....
var historyString = oldNum + " " + operator + " " + theNum + " = " + resultNum;
if (historyString.indexOf("NaN") ===-1 && historyString.indexOf("undefined") === -1) {
history.innerHTML += historyString + "<br/>";
}
Then you can look into sessionStorage
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.