Не работает динамическое изменение объекта

@ProgramDan · Регистрация: 15.04.2018

Author24 — интернет-сервис помощи студентам

Привет. Вот создал типа калькулятор с динамикой. А не работает. Помогите мне найти ошибку.

Вот код:

PHP/HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
    input{
                width: 100px;
            }
            #result{
                width: 60px;
                border: 1px solid rgba(0,0,0,0.3);
            }
            .btn{
                width: 100px;
                height: 30px;
                line-height: 30px;
                background: lightgray;
                text-align: center;
                border-radius: 5px;
                margin: 5px;
                box-shadow: 0 0 5px black;
                color: #fff;
                font-size: 18px;
            }
            .btn:hover{
                cursor: pointer;
            }
    </style>
            <div>
            <input type="text" id="firstNumber" placeholder="Введите число">
            <select name="" id="select">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="/">/</option>
                <option value="*">*</option>
            </select>
            <input type="text" id="secondNumber" placeholder="Введите число">
            <span>=</span>
            <input type="text" disabled id="res">
        </div>
        <div class="btn" onclick="calculate();">Посчитать</div>
           <script>
            function calculate(){
                var result;
                var num1 = document.getElementById('firstNumber').value;
                num1 = parseInt(num1);
                var znak = document.getElementById('select').value;
                znak = parseInt(znak);
                var num2 = document.getElementById('secondNumber').value;
                num2 = parseInt(num2);
                if(znak == '-' ){
                 result = num1 - num2;
                    document.getElementById('res').innerHTML = result;
                }
                else if(znak == '+'){
                    result = num1 + num2;
                    document.getElementById('res').innerHTML = result;
                }
                else if(znak == '*'){
                    result = num1 * num2;
                    document.getElementById('res').innerHTML = result;
                }
                else{
                    result = num1 / num2;
                    document.getElementById('res').innerHTML = result;
                    
                }
            }
        </script>
</body>
</html>

@j2FunOnly · 16.04.2018, 08:44

Сообщение от ProgramDan

Javascript

1 2	var znak = document.getElementById('select').value; znak = parseInt(znak);

Зачем вы символ операции пытаетесь привести к целому?

@Aleksandrw · 16.04.2018, 10:13

ProgramDan,

Javascript

1	document.getElementById('res').value = result;

@msheal · 16.04.2018, 12:21

Вариант 1 (короткий, но плохой, eval лучше избегать)

Javascript

function calculate(){
  var num1 = document.getElementById('firstNumber').value;
  num1 = parseInt(num1);
  var num2 = document.getElementById('secondNumber').value;
  num2 = parseInt(num2);
  var znak = document.getElementById('select').value;
            
  document.getElementById('res').value = eval(num1 + znak + num2);            
}

Вариант 2 (адекватный, на базе вашего)

Javascript

function calculate(){
  var result;
  var num1 = document.getElementById('firstNumber').value;
  num1 = parseInt(num1);
  var num2 = document.getElementById('secondNumber').value;
  num2 = parseInt(num2);
  var znak = document.getElementById('select').value;
  
  if (znak === '+') result = num1 + num2;
  if (znak === '-') result = num1 - num2;
  if (znak === '/') result = num1 / num2;
  if (znak === '*') result = num1 * num2;
            
  document.getElementById('res').value = result;            
}

	16.04.2018, 12:21