Кто -нибудь может сказать, что делать? Я попытался построить калькулятор с JavaScript и HTML, все работает нормально, но ⇐ Html

[Anonymous]

Я хочу, чтобы код отображал историю в текстовом поле после работы Funciton Calc, проблема здесь заключается в том, что я хочу иметь возможность просматривать историю, нажимая кнопку «История», а также рассчитываю в любой момент после нажатия знака для расчета из истории или выбрать историю. />

Код: Выделить всё

Calculator 

/* body {} */

.container {
box-shadow: 1px 1px 7px 1px rgb(133, 135, 136);
position: relative;
align-content: center;
border: 4px #58585853;
padding: 14px;
margin-top: 10% !important;
margin: auto;
border-radius: 3.78%;
/* border: rgba(177, 177, 177, 0.77), 2px; */
background-color: rgb(237, 244, 251);
height: fit-content;
width: fit-content;
text-align: center
}

.screen {
font-size: 20px;
background-color: rgb(92, 169, 92);
text-align: right;
text-overflow: inherit;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 0.999);
height: auto;
max-height: auto;
width: 80%;
}

.clear {
margin-left: 3px;
background-color: rgb(255, 255, 255);
height: 40px;
color: red;
font-size: 20px;
font-weight: bold;
max-height: fit-content;
position: inherit;
margin: 2%;
border-radius: 15%;
padding: 2%;

}

.history {
height: 40px;
color: rgb(255, 255, 255);
font-size: 20px;
border-radius: 10%;
background-color: rgb(69, 68, 68);
font-weight: bold;
}

.deletehistory {
height: 40px;
color: red;
font-size: 15px;
font-weight: bold;
}

.historyd {
width: 200px;
margin: auto;
text-align: left;
border: 1px solid #ccc;
padding: 10px;
max-height: 200px;
overflow-y: auto;
margin-top: 10px;
}

.history-item {
border-bottom: 1px solid #eee;
padding: 5px;
}

.disp {
padding: 10px;
width: 100%;
display: inline-block !important;

}

td .numbers {
box-shadow: 1px 1px 3px 1px rgb(93, 94, 94);
width: 80px;
height: 8vh;
background-color: rgba(222, 210, 218, 0.395);
border-radius: 15.45%;
box-shadow: 1px;
font-size: 20px;
}

td .sign {
box-shadow: 1px 1px 3px 1px rgb(101, 101, 101);
width: 80px;
height: 8vh;
font-size: 20px;
font-weight: bold;
background-color: rgba(17, 9, 14, 0.395);
border-radius: 15.45%;
box-shadow: 1px;
}






















  






  















Test










let history = [];

function checkeyfn(event) {
var display = document.getElementById('display').value
//  console.log(event);
var charCode = event.charCode;
var key = String.fromCharCode(charCode);

var key = event.key;

var allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'+', '-', '*', '/', '%', '.', '(', ')'
];
if (allowedKeys.includes(key)) {
document.getElementById("display").value += key;

} else if (key === 'Enter' || key === '=') {
calculate();
} else if (key === 'Backspace') {
Del();
}

// Prevent default actions for some keys (optional)
if (['+', '-', '*', '/', '%'].includes(key)) {
event.preventDefault();
}
}

function calculate() {
var screenvalue = document.getElementById('display').value;
var historyvalue = history;
try {
if (screenvalue.length > 1 && history.length > 0) {
var lastdigit = historyvalue[0].split('=');
console.log(historyvalue + ' History value');
}
if (screenvalue.match(/^[0-9+\-*/%().]+$/)) {
var result = eval(screenvalue);
document.getElementById('display').value = result;
var equatsto = result
if (screenvalue === result) {
console.log('This 2')
}
// adds to history
history.push(screenvalue + "=" + result);
} else {
document.getElementById('display').value = "";
alert('Invalid Input');
}
} catch (e) {
document.getElementById("display").value = '!Undefined';
9
console.log(e);
// setTimeout(clear(),500);

}

}

function clear1() {
document.getElementById("display").value = '0'
}

function Del() {
var display = document.getElementById("display");
display.value = display.value.slice(0, -1);
}

function showHistory() {
var historyDisplay = document.getElementById('display');
// historyDisplay.value = '';
// historyDisplay.style.display = 'block';
console.log('ifhistory', history);

for (var i = history.length - 1; i >= 0;  i--) {
console.log(history.length, 'checking lenght', i);

historyDisplay.value = history[i];
var splits = history.value.split('=');
console.log('Checking splits', splits);
console.log(history[i]);
}

}

Подробнее здесь: https://stackoverflow.com/questions/795 ... ript-and-h