Есть много способов сделать это.
Я полагаю, вам следует начать с простого сохранения в DOM с помощью кнопки.
Это просто, но полезно для обучения, потому что вы будете посмотрите значение в вашем отладчике, просто проверив данный элемент.
memoryRestoreButton.onclick = (function(){
// Store the value
memoryRestoreButton.dataset.whatever = numberBox.value
// Read the stored value
console.log(memoryRestoreButton.dataset.whatever)
})
<button id="memoryRestoreButton">MR</button>
<input id="numberBox" value="8888">
Теперь у элемента есть новый атрибут data-whatever, и вы можете получить значение из любого места в вашем коде.
Ваш код изменен. Обратите внимание, что калькулятор не работает, потому что пропустил библиотеку, которую вы не включили. Также ваш код использует eval() для расчета, это небезопасно. Вместо этого используйте New Function (). Этому коду уже много лет, если вам дано это упражнение, вы должны поднять флаг своему учителю.
//Changing colors of operation colors
//Multiply Color
const colorMultiply = document.getElementById('multiply')
colorMultiply.style.backgroundColor = "green" //Makes Color Green
//Divide Color
const colorDivide = document.getElementById('divide')
colorDivide.style.backgroundColor = "red"//Makes Color Red
//subtract color
const colorSubtract = document.getElementById('subtract')
colorSubtract.style.backgroundColor="blue"//Makes Color Blue
//add color
const colorAdd = document.getElementById('add')
colorAdd.style.backgroundColor="yellow"//Makes Color Yellow
//change font of numbers to blue (I did it like this incase anyone wants to color of a single number)
//Makes it easier for you to change a colour of one button
const number1 = document.getElementById('number1')
number1.style.color="blue"
const number2 = document.getElementById('number2')
number2.style.color="blue"
const number3 = document.getElementById('number3')
number3.style.color="blue"
const number4 = document.getElementById('number4')
number4.style.color="blue"
const number5 = document.getElementById('number5')
number5.style.color="blue"
const number6 = document.getElementById('number6')
number6.style.color="blue"
const number7 = document.getElementById('number7')
number7.style.color="blue"
const number8 = document.getElementById('number8')
number8.style.color="blue"
const number9 = document.getElementById('number9')
number9.style.color="blue"
const number0 = document.getElementById('number0')
number0.style.color="blue"
const decimal = document.getElementById('decimal')
decimal.style.color="blue"
//Changing color of the clear button
const clear = document.getElementById('clear')
clear.style.color="white"
clear.style.backgroundColor="black"
///////////////////////////////////////////////////////////////////////////////////////////////////////
// Then we want to insert `memoryStoreButton` before the `clear` button:
var memoryStoreButton = document.createElement("BUTTON");
memoryStoreButton.innerHTML = "MS";
clear.before(memoryStoreButton); //puts button before clear
// Then we want the `memoryClearButton` before `memoryStoreButton`
var memoryClearButton = document.createElement("BUTTON");
memoryClearButton.innerHTML = "MC";
memoryStoreButton.before(memoryClearButton);//puts button before clear
// and finally, the `memoryRestoreButton` before `memoryClearButton`
var memoryRestoreButton = document.createElement("BUTTON");
memoryRestoreButton.innerHTML = "MR";
memoryClearButton.before(memoryRestoreButton);//puts button before clear
///////////////////////////////////////////////////////////////////////////////////////////////////////////
//What number buttons are pressed
var numButton = document.querySelectorAll(".btn8");
var showNum = document.querySelector(".screen8");
numButton.forEach(function(button){
button.addEventListener('click', function(event){
if(event.target.innerHTML == "C"){
return showNum.value = "";
} else if (event.target.innerHTML == "=") {
return;
}
let view = event.target.dataset.num;
showNum.value += view;
});
});
///////////////////////////////////////////////////////////////////////////////////////////////////////////
//When equal is pressed it calculates the numbers, and if no numbers were entered there will be a error mesage
var equalButton = document.querySelector("#equals")
equalButton.addEventListener('click', function(event){
if(showNum.value == ""){
return alert("Please Enter a Value"); // If no numbers are being displayed, error alert.
}
showNum.value = showNum.value + "=" + eval(showNum.value);
});
//Align test to the right of screen
document.getElementById("numberBox").style.textAlign = "right";
////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Change colors when hovering over buttons
var btn = document.getElementsByTagName("button")
function addButtonHandlers(btn) {
// make black button on mouseover
btn.addEventListener('mouseover', () => {
btn.style.backgroundColor = 'black';
});
// make grey button on mouseout
btn.addEventListener('mouseout', () => {
btn.style.backgroundColor = 'grey';
});
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////
let memory = 0
//Making a memory store button functional
memoryStoreButton.addEventListener('click',function(event){
memory = numberBox.value;
})
//Making memory Clear Button functional
//Making a memory Restore Button functional
memoryClearButton.addEventListener('click',function(event){
memory = 0;
})
//Making memory Clear Button functional
memoryRestoreButton.addEventListener('click',function(event){
numberBox.value = memory;
})
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.calculator8{
flex: 0 0 40%;
}
.screen8{
width: 100%;
font-size: 5rem;
padding: 0.5rem;
background: rgb(41,41,56);
color: white;
border:none;
}
.buttons8{
display: flex;
flex-wrap: wrap;
transition: all 0.5s linear;
}
button{
flex:0 0 25%;
border: 1px solid black;
padding: 0.25rem 0;
transition: all 2s ease;
}
.btn-kground: rgb(224,224,224);
}
.btn8{
font-size: 4rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Calculator 8 </title>
</head>
<body>
<section class="calculator8">
<h1> Calculator 8 </h1>
<form>
<input type="text" name="calcScreeng" id="numberBox" class="screen8">
</form>
<div class="buttons8">
<!-- operation buttons -->
<button id="multiply" type="button" class="btn8 btn-mul" data-num="*">*</button>
<button id="divide" type="button" class="btn8 btn-div" data-num="/">/</button>
<button id="subtract" type="button" class="btn8 btn-sub" data-num="-">-</button>
<button id="add" type="button" class="btn8 btn-add" data-num="+">+</button>
<!-- number buttons -->
<button id="decimal" type="button" class="btn8 btn-grey" data-num=".">.</button>
<button id="number9" type="button" class="btn8 btn-grey" data-num="9">9</button>
<button id="number8" type="button" class="btn8 btn-grey" data-num="8">8</button>
<button id="number7" type="button" class="btn8 btn-grey" data-num="7">7</button>
<button id="number6" type="button" class="btn8 btn-grey" data-num="6">6</button>
<button id="number5" type="button" class="btn8 btn-grey" data-num="5">5</button>
<button id="number4" type="button" class="btn8 btn-grey" data-num="4">4</button>
<button id="number3" type="button" class="btn8 btn-grey" data-num="3">3</button>
<button id="number2" type="button" class="btn8 btn-grey" data-num="2">2</button>
<button id="number1" type="button" class="btn8 btn-grey" data-num="1">1</button>
<button id="number0" type="button" class="btn8 btn-grey" data-num="0">0</button>
<button id="equals" type="button" class="btn8 btn-grey">=</button>
<button id="clear" type="button" class="btn8 btn-grey">C</button>
</div>
</section>
</body>
</html>