Как сделать рабочие кнопки MS и MR для калькулятора?

Question

Помогите изменить код, чтобы кнопки MS и MR выполняли свои функции.

let operation;

 function calc() {
     let num1, num2, result;
     num1 = Number(document.getElementById("num1").value);
     num2 = Number(document.getElementById("num2").value);

     let outcome = document.getElementById("result");
     let story = document.getElementById("history");
     
     switch (operation) {
         case "+":
             result = num1 + num2;
             break;
         case "-":
             result = num1 - num2;
             break;
         case "*":
             result = num1 * num2;
             break;
         case "/":
             result = num1 / num2;
             break;
         default:
             outcome.textContent = "Выберите действие";
             return;
     }

     document.getElementById("result").innerHTML = result;
    
     if ((num2 == 0) && (operation == '/')) {
         document.getElementById("result").innerHTML = "На ноль делить нельзя";
         return;
     }
     
     let html = `<p> ${num1} ${operation} ${num2} = ${result} </p>`;
     story.insertAdjacentHTML('beforeend', html);
     
     if ((num1 > 99999999) || (num2 > 99999999)) {
         outcome.textContent = 'Калькулятор не работает с числами, которые больше чем 99 999 999';
         story.textContent = 'Калькулятор не работает с числами, которые больше чем 99 999 999';
         return;  
}

 }

<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор</title>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <div class="calc">
        <div class="calc-screen">
            <input id="num1" >

            <button class="calc-button" onclick="operation='+'">+</button>
            <button class="calc-button" onclick="operation='-'">-</button>
            <button class="calc-button" onclick="operation='*'">*</button>
            <button class="calc-button" onclick="operation='/'">/</button>

            <input id="num2">

            <button class="calc_button" onclick="calc()">MS</button>
            
            <button class="calc_button" onclick="calc()">=</button>
            
            <button class="calc_button" onclick="calc()">MR</button>
            

            <p id="result"></p>
        </div>

        <div class="history-screen">

            <p id="history"></p>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>

</html>

html {
    box-sizing: border-box;
}

*,
*::after,
*::before {
    box-sizing: inherit;
}

ul[class],
ol[class] {
    padding: 0;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

ul[class] {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

input,
button,
textarea,
select {
    font: inherit;
}



.calc {
    display: flex;
    justify-content: center;


}

.calc-screen {
    max-width: 300px;
    margin: 100px 20px 100px 20px;
    padding: 22px 22px;
    border: 10px solid #000;
    border-radius: 20px;
}


input, #history, #result
{
    display: block;
    margin-bottom: 10px;
    padding: 15px 10px 15px 10px;
    font-size: 16px;
    resize: none;
    max-width: 250px;
    min-height: 80px;
    max-height: 370px;
    background-color: #ccc8c8;
    border: none;
    border-radius: 20px;
}

button {
    margin-bottom: 10px;
    background-color: #e8e6e6;
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 20px;
    cursor: pointer;
}

.calc_button {
    margin-left: 17px;
}

.calc-button + .calc-button {
    margin-left: 7px;
}

.calc_button + .calc_button {
    margin-left: 17px;
}

.calc-button:hover {
    filter: brightness(90%);
}

.calc_button:hover {
    filter: brightness(90%);
}

.calc-button:active {
    filter: brightness(80%);
}

.calc_button:active {
    filter: brightness(80%);
}

.calc-button:focus {
    filter: brightness(80%);
}

.calc_button:focus {
    filter: brightness(80%);
}

.history-screen {
    width: 300px;
    margin: 100px 20px 100px 20px;
    padding: 22px 22px;
    border: 10px solid #000;
    border-radius: 20px;
}

#history {
    min-height: 370px;
    overflow: auto;
}

p {
    min-height: 40px;
}

БЛОГ НА HUSL

Как сделать рабочие кнопки MS и MR для калькулятора?

Ответы (0 шт):