Простой калькулятор

Question

Почему не работает калькулятор ?

"use strict";
function CalcNumbers(result){	
    document.getElementById("input").innerHTML=document.getElementById("input").innerHTML+result;
   }

.calculator{
   width: 500px;
   background: #F08080;
   border: 1px solid black;  
   position: relative;
   text-align: center;
   font-size: 50px;
}

.input{
    height: 50px;
    background: skyblue;
    margin: 5px;
}

.operators{
    display: flex;
}


.operators1{
    height: 50px;
    flex: 25%;
    background: skyblue;
    margin:5px;
    
    
}

.leftPanel {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 240px;
}

.numbers{
display: flex;
flex-grow: 1;
width: 75%;
}
.number1{
    height: 50px;
    margin: 5px;
    background: skyblue;
    flex:25%;
    
    
}
.equal{
    background: skyblue;
    height: 240px;
    margin: 5px;
    width: calc(25% - 10px);
}

.operators1, .number1, .equal {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

<head>
    <meta charset="UTF-8">
    <title>Калькулятор</title>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet" href="calc.css" />
</head>

<body>
   <div class="calculator">
  <div class="input" id="input" ></div>
  <div class="buttons">
    <div class="operators">
      <div class="operators1" id="plus"  onClick="CalcNumbers(plus)">+</div>
      <div class="operators1" id="minus"  onClick="CalcNumbers(minus)">-</div>
      <div class="operators1" id="umnoj" onClick="CalcNumbers(umnoj)">&times;</div>
      <div class="operators1" id="delenie" onClick="CalcNumbers(delenie)">&divide;</div>
    </div>
    <div class="leftPanel">
      <div class="numbers">
        <div class="number1" id="sem"  onClick="CalcNumbers(sem)">7</div>
        <div class="number1" id="vosem"  onClick="CalcNumbers(vosem)">8</div>
        <div class="number1" id="devet"  onClick="CalcNumbers(devet)">9</div>
      </div>
      <div class="numbers">
        <div class="number1" id="chetir"  onClick="CalcNumbers(chetir)">4</div>
        <div class="number1" id="pyat"  onClick="CalcNumbers(pyat)">5</div>
        <div class="number1" id="shest"  onClick="CalcNumbers(shest)">6</div>
      </div>
      <div class="numbers">
        <div class="number1" id="odin"  onClick="CalcNumbers(odin)">1</div>
        <div class="number1" id="dva"  onClick="CalcNumbers(dva)">2</div>
        <div class="number1" id="tri"  onClick="CalcNumbers(tri)">3</div>
      </div>
      <div class="numbers">
        <div class="number1" id="nol"  onClick="CalcNumbers(nol)">0</div>
        <div class="number1" id="drob"  onClick="CalcNumbers(drob)">.</div>
        <div class="number1" id="clear" onClick="CalcNumbers(clear)">C</div>
      </div>
      <div class="equal" id="result"  onClick="input=eval(input)">=</div>
    </div>
  </div>
</div>
<script src="calc.js">
   </script>
</body>

</html>

Answer 1

"use strict";
var input = document.getElementById("input");
function CalcNumbers(result){
    document.getElementById("input").value += result;
}
function CountResult() {
    input.value = eval(input.value);
}

function ClearInput() {
    input.value = "";
}

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

<head>
    <meta charset="UTF-8">
    <title>Калькулятор</title>
    <style type="text/css"></style>
    <link type="text/css" rel="stylesheet" href="calc.css" />
</head>

<body>
<div class="calculator">
    <input class="input" id="input" />
    <div class="buttons">
        <div class="operators">
            <div class="operators1" id="plus"  onClick=CalcNumbers("+")>+</div>
            <div class="operators1" id="minus"  onClick=CalcNumbers("-")>-</div>
            <div class="operators1" id="umnoj" onClick=CalcNumbers("*")>&times;</div>
            <div class="operators1" id="delenie" onClick=CalcNumbers("/")>&divide;</div>
        </div>
        <div class="leftPanel">
            <div class="numbers">
                <div class="number1" id="sem"  onClick=CalcNumbers(7)>7</div>
                <div class="number1" id="vosem"  onClick=CalcNumbers(8)>8</div>
                <div class="number1" id="devet"  onClick=CalcNumbers(9)>9</div>
            </div>
            <div class="numbers">
                <div class="number1" id="chetir" onClick=CalcNumbers(4)>4</div>
                <div class="number1" id="pyat"  onClick=CalcNumbers(5)>5</div>
                <div class="number1" id="shest"  onClick=CalcNumbers(6)>6</div>
            </div>
            <div class="numbers">
                <div class="number1" id="odin"  onClick=CalcNumbers(1)>1</div>
                <div class="number1" id="dva"  onClick=CalcNumbers(2)>2</div>
                <div class="number1" id="tri"  onClick=CalcNumbers(3)>3</div>
            </div>
            <div class="numbers">
                <div class="number1" id="nol"   onClick=CalcNumbers(0)>0</div>
                <div class="number1" id="drob"   onClick=CalcNumbers(".")>.</div>
                <div class="number1" id="clear" onClick=ClearInput()>C</div>
            </div>
            <div class="equal" id="result"  onClick=CountResult()>=</div>
        </div>
    </div>
</div>
<script src="calc.js">
</script>
</body>

</html>

Не правильно передаете параметры в функцию CalcNumbers они должны быть непосредственно числами или операцией и вызывать через "" функцию в html не нужно, попробуйте так:

БЛОГ НА HUSL

Простой калькулятор

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