stackoom
  简体   繁体   中英

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

 原文  2021-01-02 15:06:16  3   2    javascript/ html/ trigonometry

Question

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

2 answers

solution1
 0  2021-01-04 10:29:03

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>

solution2
 0  2021-01-04 10:29:22

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.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Want to add string when we found trigonometry operator in js How to simplify my JS functions in a nutrition calculator? how do I add a calculator to my chatbot I want these functions to be accessible to every js controller throughout my application. How do I achieve this? i'm new to webpack 3 i want to share my var to other js file how to? I want my input to be connected to functions to be validated How can i chain multiple operations in my calculator using JS? How do I add square root to my JavaScript/HTML calculator? When I add the for() function, the other functions don't do anything in JS In Node.js, how do I "include" functions from my other files?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM