how to make calculator using javascript using on text box for input value and perform add and subtract using button
Question
As below you can see I want perform calculation of adding and subtracting but the program not giving output of calculation. there is input box for operator 1 and operator 2. I create two function add and sub. And using document.getElementById I pass the value of a and b and want to calculate but the function is does not giving output.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> Operator1:<input type="text" id="a"> <br><br> Operator2:<input type="text" id="b"> <br><br> <input type="button" value="Add" id="add" onclick="addd()"> <input type="button" value="sub" id="sub" onclick="subb()"> <br><br> Result: <input type="text" id="res"> <script> function addd(){ var ra= document.getElementById('a').value; var rb=document.getElementById('b').value; var rab=ra+rb; Document.getElementById('res').value==rab; } function subb(){ var ra= document.getElementById('a').value; var rb=document.getElementById('b').value; var rab=ra-rb; document.getElementById('res').value==rab; } </script> </body> </html>2 answers
solution1
0 2022-06-01 15:46:11
You want to make sure you're using the assignment operator, instead of the comparison operator.
Try document.getElementById('res').value = rab; instead.
solution2
0 2022-06-01 16:23:15
I'll provide an example that you'll hopefully learn from, but I really recommend you go and learn the basics before you continue programming.
<!DOCTYPE html>
<html>
<head>
<style>input[type=number], button { display:inline-block; margin-bottom: 4px; }</style>
</head>
<body>
<input type="number" id="input-a">
<input type="number" id="input-b"><br>
<button type="button" id="add">Add</button>
<button type="button" id="subtract">Subtract</button><br>
<input type="number" id="result" disabled>
<script>
const resultElement = document.querySelector("#result");
const inputAElement = document.querySelector("#input-a");
const inputBElement = document.querySelector("#input-b");
document.querySelector("#add").addEventListener("click", event => {
resultElement.value = +inputAElement.value + +inputBElement.value;
});
document.querySelector("#subtract").addEventListener("click", event => {
resultElement.value = +inputAElement.value - +inputBElement.value;
});
</script>
</body>
</html>
The only thing that's not self-explanatory here is the actual calculation. Notice how I put a + at the start of each value +inputAElement.value ? That's to cast the value to a number for the calculation. Otherwise in certain situations, the value could be treated as a text value and just mashed together (eg 5 + 1 = 51 ).
Use CSS styles to change the look, as shown in the style tag. Abusing won't make you any friends.
<!DOCTYPE html> <html> <head> <style>input[type=number], button { display:inline-block; margin-bottom: 4px; }</style> </head> <body> <input type="number" id="input-a"> <input type="number" id="input-b"><br> <button type="button" id="add">Add</button> <button type="button" id="subtract">Subtract</button><br> <input type="number" id="result" disabled> <script> const resultElement = document.querySelector("#result"); const inputAElement = document.querySelector("#input-a"); const inputBElement = document.querySelector("#input-b"); document.querySelector("#add").addEventListener("click", event => { resultElement.value = +inputAElement.value + +inputBElement.value; }); document.querySelector("#subtract").addEventListener("click", event => { resultElement.value = +inputAElement.value - +inputBElement.value; }); </script> </body> </html>
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.