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

[Anonymous]

Я хочу, чтобы код отображал историю в текстовом поле после работы Funciton Calc. Проблема здесь заключается в том, что я хочу иметь возможность просмотреть историю, нажимая кнопку «История», а также рассчитывать в любой момент после нажатия знака для расчета истории или выбрать историю. Чтобы переполнить y < /li>
Я понятия не имею, как исправить, когда я ввожу номер, и Eval дает мне результат с знаком '=', я просто хочу результат. продолжил ввести номер, который я не мог сделать < /li>
Кнопка истории должна проходить через историю, чтобы a+b = c, затем C+d = E < /li>
Когда я нажимаю на любой оператор после расчета истории для истории цикла, но не определяется < /li>
Я хочу, чтобы история показала историю. x+y = 55, x-y = 33 < /li>
< /ol>
код: < /p>

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

let history = [];

function checkeyfn(event) {
var display = document.getElementById('display').value
var charCode = event.charCode;
var key = String.fromCharCode(charCode);
var key = event.key;
console.log('Initial length', display.length);
var allowedKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'+', '-', '*', '/', '%', '.', '(', ')'
];
if (allowedKeys.includes(key)) {
var newvalue = document.getElementById("display").value += key;
if (display.value === newvalue) {
var newvalue = document.getElementById("display").value += key;
}
if (display.value !== newvalue && allowedKeys.includes(key)) {
if (display.length > 1 && history.length > 0) {
console.log("checking if history is here ", history);
for (var i = history.length; i >= 0, i++;) {
console.log('I am being called History', history[i], 'Loop number', i);
//  var lastdigit  = history[i].split('=');
console.log('I am being called Last digit', lastdigit);
}
console.log('Check if lastdigit is added', lastdigit);
console.log('Check if new value is added', newvalue);
}
}

} 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 {
console.log('This is screenvalue', screenvalue, 'And this is length', screenvalue.length);

if (screenvalue && screenvalue.match(/^[0-9+\-*/%().]+$/)) {
var result = eval(screenvalue);
console.log('The result is ', result);
document.getElementById('display').value = result;
if (screenvalue === result) {
console.log('This 2')
}
var pushes = history.push(screenvalue + "=" + result);
showHistory();
} 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() {
console.log('Pushed to history', history);
var historyDisplay = document.getElementById('display');

for (var i = history.length - 1; i >= 0; i--) {
historyDisplay.value = history[i];
var splits = [] = history[i].split('=', );
if (splits.length > 0) {
for (var i = splits.lenght; i 
/* 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;
}< /code>



















 






   















Test

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