I want to add sin and other trigonometry functions in my JS calculator

user_14855763 0
Viewed 523

This "sin" function is not working properly. I don't know my mistake. I must be wrong somewhere but i am not getting it. Anyone can please correct by JS code for sin . I have provided my HTML and JS code for the same. Basically, when I press "sin" button, it will show me "NA" and after some small changes, it will show me "0" sometimes.

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;
        }
    })
}
trigonometry html javascript
2 Answers

Seems working fine, added screenValue = eval(screenValue) when you press =

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>

user_23080050

Tried adding a runnable snippet to your question, however as others point out, screenValue was missing initialization and that prevented the code to run here on StackOverflow.

After adding that line, sin starts working, with the glitch I described earlier.

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>

Now you can type numbers, press sin, and it works. You can even type 1, +, 1, =, sin, and it will show the result. However if you type 1, +, 1, sin (note the missing =), it will show NaN, that's what the suggestion with eval() can fix:

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>

Now you can type 1, +, 1, sin too, and it will work.

user_79164380
Related