Блог

Главная - Вопросы по программированию - Я хочу добавить sin и другие функции тригонометрии в мой калькулятор JS

Я хочу добавить sin и другие функции тригонометрии в мой калькулятор JS

#javascript #html #trigonometry

#javascript #HTML #тригонометрия

Вопрос:

Эта функция «sin» не работает должным образом. Я не знаю своей ошибки. Должно быть, я где-то ошибаюсь, но я этого не понимаю. Любой может, пожалуйста, исправить код JS для sin. Я предоставил свой HTML и JS-код для того же. В принципе, когда я нажимаю кнопку «sin», она показывает мне «NA», а после некоторых небольших изменений иногда показывает мне «0».

HTML

 <!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">
    <link rel="stylesheet" href="index.css">
    <title>Calculator</title>
</head>

<body>
    <div class="container">

        <div class="calculator">
            <input type="text" name="screen" id="screen">
            <table>
                <tr>
                    <td><button>(</button></td>
                    <td><button>)</button></td>
                    <td><button>C</button></td>
                    <td><button>%</button></td>
                </tr>
                <tr>
                    <td><button id="d">sin</button></td>
                    <td><button>cos</button></td>
                    <td><button>tan</button></td>
                    <td><button>DEL</button></td>
                </tr>
                <tr>
                    <td><button>7</button></td>
                    <td><button>8</button></td>
                    <td><button>9</button></td>
                    <td><button>X</button></td>
                </tr>
                <tr>
                    <td><button>4</button></td>
                    <td><button>5</button></td>
                    <td><button>6</button></td>
                    <td><button>-</button></td>
                </tr>
                <tr>
                    <td><button>1</button></td>
                    <td><button>2</button></td>
                    <td><button>3</button></td>
                    <td><button> </button></td>
                </tr>
                <tr>
                    <td><button>0</button></td>
                    <td><button>.</button></td>
                    <td><button>/</button></td>
                    <td><button>=</button></td>
                </tr>
            </table>
        </div>
    </div>

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

</html>

Java Script

 let screen = document.getElementById('screen');
buttons = document.querySelectorAll('button');
for (item of buttons) {
    item.addEventListener('click', (e) => {
        buttonText = e.target.innerText;
        if (buttonText == 'X') {
            buttonText = "*"
            screenValue  = buttonText;
            screen.value = screenValue;
        } else if (buttonText == "C") {
            screenValue = ""
            screen.value = screenValue;
        } else if (buttonText == "=") {
            screen.value = eval(screenValue)
        } else if (buttonText == "DEL") {
            screen.value = screenValue.slice(0, -1)
            screenValue = screen.value

        } else if (buttonText == "sin") {
            var x = screen.value;
            x = x * Math.PI / 180;
            screen.value = Math.sin(x);
            screenValue = screen.value
        } else {
            screenValue  = buttonText;
            screen.value = screenValue;
        }
    })
}

Комментарии:

1. где вы начинаете screenValue ?

2. Немного OT,. Назначение одного и того же обработчика функции обработчикам нескольких кликов — хорошая идея,. Но обратите внимание, что ваш код фактически будет генерировать несколько экземпляров функций. Упомяните только, поскольку похоже, что это то, что вы хотели сделать.

3. Попробуйте с var x = eval(screen.value); помощью . Если есть выражение, это само по себе не сработает. Просто введите "45"*Math.PI/180 и "3*15"*Math.PI/180 в консоли разработчика, и вы увидите разницу.

4. @tevemadar Это тоже не сработало.

5. @tevemadar Если это не игрушечный проект, который никто, кроме пользователя, не собирается использовать, не рекомендуйте eval людям…

Ответ №1:

Кажется, работает нормально, добавляется screenValue = eval(screenValue) при нажатии = 

 let screenValue = "";
let screen = document.getElementById('screen');
buttons = document.querySelectorAll('button');
for (item of buttons) {
  item.addEventListener('click', (e) => {
    buttonText = e.target.innerText;
    if (buttonText == 'X') {
      buttonText = "*"
      screenValue  = buttonText;
      screen.value = screenValue;
    } else if (buttonText == "C") {
      screenValue = ""
      screen.value = screenValue;
    } else if (buttonText == "=") {
      screen.value = eval(screenValue)
      screenValue = eval(screenValue)
    } else if (buttonText == "DEL") {
      screen.value = screenValue.slice(0, -1)
      screenValue = screen.value
    } else if (buttonText == "sin") {
      var x = eval(screen.value);
      x = x * Math.PI / 180;
      screen.value = Math.sin(x);
      screenValue = screen.value
    } else {
      screenValue  = buttonText;
      screen.value = screenValue;
    }
  })
} 
 <body>
  <div class="container">

    <div class="calculator">
      <input type="text" name="screen" id="screen">
      <table>
        <tr>
          <td><button>(</button></td>
          <td><button>)</button></td>
          <td><button>C</button></td>
          <td><button>%</button></td>
        </tr>
        <tr>
          <td><button id="d">sin</button></td>
          <td><button>cos</button></td>
          <td><button>tan</button></td>
          <td><button>DEL</button></td>
        </tr>
        <tr>
          <td><button>7</button></td>
          <td><button>8</button></td>
          <td><button>9</button></td>
          <td><button>X</button></td>
        </tr>
        <tr>
          <td><button>4</button></td>
          <td><button>5</button></td>
          <td><button>6</button></td>
          <td><button>-</button></td>
        </tr>
        <tr>
          <td><button>1</button></td>
          <td><button>2</button></td>
          <td><button>3</button></td>
          <td><button> </button></td>
        </tr>
        <tr>
          <td><button>0</button></td>
          <td><button>.</button></td>
          <td><button>/</button></td>
          <td><button>=</button></td>
        </tr>
      </table>
    </div>
  </div>

</body>

Ответ №2:

Попытался добавить к вашему вопросу доступный для выполнения фрагмент, однако, как отмечают другие, screenValue отсутствовала инициализация, и это помешало запуску кода здесь, в StackOverflow.

После добавления этой строки sin начинает работать сбой, который я описал ранее.

 let screenValue = ""; // <- this is the new line
let screen = document.getElementById('screen');
buttons = document.querySelectorAll('button');
for (item of buttons) {
  item.addEventListener('click', (e) => {
    buttonText = e.target.innerText;
    if (buttonText == 'X') {
      buttonText = "*"
      screenValue  = buttonText;
      screen.value = screenValue;
    } else if (buttonText == "C") {
      screenValue = ""
      screen.value = screenValue;
    } else if (buttonText == "=") {
      screen.value = eval(screenValue)
    } else if (buttonText == "DEL") {
      screen.value = screenValue.slice(0, -1)
      screenValue = screen.value

    } else if (buttonText == "sin") {
      var x = screen.value;
      x = x * Math.PI / 180;
      screen.value = Math.sin(x);
      screenValue = screen.value
    } else {
      screenValue  = buttonText;
      screen.value = screenValue;
    }
  })
} 
 <div class="container">

  <div class="calculator">
    <input type="text" name="screen" id="screen">
    <table>
      <tr>
        <td><button>(</button></td>
        <td><button>)</button></td>
        <td><button>C</button></td>
        <td><button>%</button></td>
      </tr>
      <tr>
        <td><button id="d">sin</button></td>
        <td><button>cos</button></td>
        <td><button>tan</button></td>
        <td><button>DEL</button></td>
      </tr>
      <tr>
        <td><button>7</button></td>
        <td><button>8</button></td>
        <td><button>9</button></td>
        <td><button>X</button></td>
      </tr>
      <tr>
        <td><button>4</button></td>
        <td><button>5</button></td>
        <td><button>6</button></td>
        <td><button>-</button></td>
      </tr>
      <tr>
        <td><button>1</button></td>
        <td><button>2</button></td>
        <td><button>3</button></td>
        <td><button> </button></td>
      </tr>
      <tr>
        <td><button>0</button></td>
        <td><button>.</button></td>
        <td><button>/</button></td>
        <td><button>=</button></td>
      </tr>
    </table>
  </div>
</div>

Теперь вы можете вводить числа, нажимать sin , и это работает. Вы даже можете ввести 1 , , 1 , = , sin , и он покажет результат. Однако, если вы введете 1 , , 1 , sin (обратите внимание на пропущенное = ), он покажет NaN , что предложение с eval() может исправить:

 let screenValue = ""; // <- this is the new line
let screen = document.getElementById('screen');
buttons = document.querySelectorAll('button');
for (item of buttons) {
  item.addEventListener('click', (e) => {
    buttonText = e.target.innerText;
    if (buttonText == 'X') {
      buttonText = "*"
      screenValue  = buttonText;
      screen.value = screenValue;
    } else if (buttonText == "C") {
      screenValue = ""
      screen.value = screenValue;
    } else if (buttonText == "=") {
      screen.value = eval(screenValue)
    } else if (buttonText == "DEL") {
      screen.value = screenValue.slice(0, -1)
      screenValue = screen.value

    } else if (buttonText == "sin") {
      var x = eval(screen.value);    // <-- the other change
      x = x * Math.PI / 180;
      screen.value = Math.sin(x);
      screenValue = screen.value
    } else {
      screenValue  = buttonText;
      screen.value = screenValue;
    }
  })
} 
 <div class="container">

  <div class="calculator">
    <input type="text" name="screen" id="screen">
    <table>
      <tr>
        <td><button>(</button></td>
        <td><button>)</button></td>
        <td><button>C</button></td>
        <td><button>%</button></td>
      </tr>
      <tr>
        <td><button id="d">sin</button></td>
        <td><button>cos</button></td>
        <td><button>tan</button></td>
        <td><button>DEL</button></td>
      </tr>
      <tr>
        <td><button>7</button></td>
        <td><button>8</button></td>
        <td><button>9</button></td>
        <td><button>X</button></td>
      </tr>
      <tr>
        <td><button>4</button></td>
        <td><button>5</button></td>
        <td><button>6</button></td>
        <td><button>-</button></td>
      </tr>
      <tr>
        <td><button>1</button></td>
        <td><button>2</button></td>
        <td><button>3</button></td>
        <td><button> </button></td>
      </tr>
      <tr>
        <td><button>0</button></td>
        <td><button>.</button></td>
        <td><button>/</button></td>
        <td><button>=</button></td>
      </tr>
    </table>
  </div>
</div>

Теперь вы тоже можете ввести 1 , , 1 , sin и это сработает.

Комментарии:

1. попробуйте нажать эти кнопки 5 5 = 5 =, результат неправильный

2. @MedetTleukabiluly Я не уверен, что не так с 15. Кстати, это продолжение моего комментария, сделанного несколько дней назад, потому что OP указал, что это не сработало.