我想在我的 JS 计算器中添加 sin 和其他三角函数

编程问答 2022-06-01

问题描述

这个“罪”功能不能正常工作。我不知道我的错误。我一定在某个地方错了，但我不明白。任何人都可以通过 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 脚本

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;
        }
    })
}

解决方法

看起来工作正常，当您按下 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>

,

尝试向您的问题添加一个可运行的代码段，但正如其他人指出的那样，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',-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，它会起作用。