Как в калькуляторе сделать кнопку возвращающее прошлое действие?

Question

[McNiket]

spoiler

Вот HTML

<form name="case">
	<div class="kalk">
		<p class="pp1">Calculator</p>
		 <input name="display" id="display" value="">
		 <div class="li1"></div>
		<div class="bb5">
		 <input type="button" class="b16" id="nz" value="↩">
		 <input type="button" class="b17" id="del" value="DEL" onclick="runC()">
		</div>
		 <div class="bb1">
		 <input type="button" class="b1" id="7" value="7" onclick="run7()">
		 <input type="button" class="b2" id="8" value="8" onclick="run8()">
		 <input type="button" class="b3" id="9" value="9" onclick="run9()">
		 <input type="button" class="b4" id="del" value="/" onclick="runDivide()">
		</div>
		<div class="bb2">
		 <input type="button" class="b5" id="4" value="4" onclick="run4()">
		 <input type="button" class="b6" id="5" value="5" onclick="run5()">
		 <input type="button" class="b7" id="6" value="6" onclick="run6()">
		 <input type="button" class="b8" id="minus"  value="-" onclick="runMinus()">
		</div>
		<div class="bb3">
		 <input type="button" class="b9" id="1" value="1" onclick="run1()">
		 <input type="button" class="b10" id="2" value="2" onclick="run2()">
		 <input type="button" class="b11" id="3"value="3" onclick="run3()">
		 <input type="button" class="b12" id="umn" value="*" onclick="runMultiply()">
		</div>
		<div class="bb4">
		 <input type="button" class="b13" id="nol" value="0" onclick="run0()">
		 <input type="button" class="b14" id="." value="." onclick="runt()">	
		 <input type="button" class="b18" id="raw" value="=" onclick="runEquals()">
		 <input type="button" class="b15" id="pl" value="+"  onclick="runPlus()">
		</div>

	</div>

Вот CSS

body{
	background-color: black;
}
.kalk{
	margin-left: 500px;
	margin-top: 30px;
	background-color: red;
	width: 500px;
	height: 780px;
	background-color: #00FFFF;
	border-radius: 20px;
}
#display{
	width: 98%;
  height: 30px;
  text-align: right;
  font-size: 1.5rem;
  margin-left: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}	
	
.bb1{
	height: 100px;
	margin-top: 20px;
	width: 500px;
	display: flex;
  justify-content: space-around;
  align-items: center;
}
.b1{
	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    padding: 10px;
}
.b1:hover{
	background-color: #808080;
}
.b2:hover{
	background-color: #808080;
}
.b3:hover{
	background-color: #808080;
}
.b4:hover{
	background-color: #808080;
}
.b5:hover{
	background-color: #808080;
}
.b6:hover{
	background-color: #808080;
}
.b7:hover{
	background-color: #808080;
}
.b8:hover{
	background-color: #808080;
}
.b9:hover{
	background-color: #808080;
}
.b10:hover{
	background-color: #808080;
}
.b11:hover{
	background-color: #808080;
}
.b12:hover{
	background-color: #808080;
}
.b13:hover{
	background-color: #808080;
}
.b14:hover{
	background-color: #808080;
}
.b15:hover{
	background-color: #808080;
}
.b16:hover{
	background-color: #808080;
}
.b17:hover{
	background-color: #808080;
}
.b18:hover{
	background-color: #808080;
}
.b2{
	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    padding: 10px;
}
.b3{
	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    padding: 10px;
}
.b4	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    padding: 10px;
}
.bb2 {
	height: 100px;
	margin-top: 30px;
	width: 500px;
	display: flex;
  justify-content: space-around;
  align-items: center;
}
.b5	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    padding: 10px;
}
.b6	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    padding: 10px;
}
.b7	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.b8	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.bb3 {
	height: 100px;
	margin-top: 30px;
	width: 500px;
	display: flex;
  justify-content: space-around;
  align-items: center;
}
.b9	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.b10	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.b11	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.b12	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.bb4 {
	height: 100px;
	margin-top: 30px;
	width: 500px;
	display: flex;
  justify-content: space-around;
  align-items: center;
}
.b13	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.b14	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.b15	{
 	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.bb5 {
	height: 80px;
	margin-top: 1px;
	width: 500px;
	display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
.b16 {
	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	margin-left: 22px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.b17 {
	height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	margin-right: 22px;
	font-size: 30px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}
.pp1{
	font-size: 50px;
	margin-left: 135px;
	color: orange;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
    width: 250px;
}
.li1{
	height: 1px;
	width: 97%;
	background-color: black;
	margin-left: 1.5%;
	margin-top: 15px;
	box-shadow: 0 0 10px rgba(0,0,0,2.5);
}
.b18{
    height: 80px;
	width: 80px;
	border: none;
	border-radius: 15px;
	font-size: 40px;
	background-color: #c4bebe;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
    padding: 10px;
}

Вот JS

function run1(){

  document.case.display.value += "1"
};
function run2(){

  document.case.display.value += "2"
};
function run3(){

  document.case.display.value += "3"
};
function run4(){

  document.case.display.value += "4"
};
function run5(){

  document.case.display.value += "5"
};

function run6(){

  document.case.display.value += "6"
};

function run7(){

  document.case.display.value += "7"
};

function run8(){

  document.case.display.value += "8"
};

function run9(){

  document.case.display.value += "9"
};

function run0(){

  document.case.display.value += "0"
};
function runPlus(){

  document.case.display.value += "+"
};
function runMinus(){

  document.case.display.value += "-"
};
function runDivide(){

  document.case.display.value += "/"
};
function runMultiply(){

  document.case.display.value += "*"
};

function runC(){

  document.case.display.value = ""
};
function runt(){

  document.case.display.value += "."
};


function runEquals() {
  var equals = eval(document.case.display.value)
  document.case.display.value = equals;
}

Comments

[Модератор]

Фрагменты кода надо размещать в виде текста и оборачивать тэгом code для корректного отображения. Удобно делать кнопкой </>
Это обязательно, см.п.3.8 Регламента.
Сюда же относится traceback, ввод и вывод в консоли и другая структурированная текстовая инфа.

[Модератор]

Когда вы регистрировались, вы обещали выполнять Регламент. Ваше сообщение нарушило сразу несколько параграфов Регламента.
Если вы будете продолжать нарушать Регламент, ваши вопросы могут быть удалены, а аккаунт заблокирован модераторами временно или навсегда.
Будьте благоразумны.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

Answer 1

[Александр]

Перед выполнением действия сохраняйте значение поля в массив Array.push(), а при нажатии кнопки извлекайте Array.pop() и помещайте обратно в поле. Таким образом массив будет хранить всю историю значений в поле.