I know similar questions have been asked earlier. Still, I would like to know if it is possible to write a function for the calculator based on the code I have written so far.
I know how to make the simplest addition calculator exclusively:
& lt; input id = "num1" / & gt;
& lt; p & gt; + & lt; / p & gt;
& lt; input id = "num2" / & gt;
& lt; button onclick = "func ()" & gt; equals ... & lt; / button & gt;
& lt; p id = "result" & gt; & lt; / p & gt;
& lt; script & gt;
function func () {
var num1 = Number (document.getElementById ("num1"). value);
var num2 = Number (document.getElementById ("num2"). value);
var result = num1 + num2;
document.getElementById ("result"). innerHTML = result;
}
& lt; / script & gt;
Until now, no doubt about it. But for now, I would like to replace the static plus sign (+) with four buttons for all basic operations: addition (+), subtraction (-), multiplication (x), division (:).
I am able to insert the interface and distribution of buttons, but I do not have time to create a function that changes the operator in the result variable, depending on the selected operation button.
Do I need to do a separate function for each operator button? Or is it possible to insert the entire program into a execute button function (“equals …”)?
Here is the code written so far:
& lt; input id = "num1" / & gt;
& lt; div id = "operator_btns" & gt;
& lt; button id = "plus" class = "operator" & gt; + & lt; / button & gt;
& lt; button id = "minus" class = "operator" & gt; - & lt; / button & gt;
& lt; button id = "times" class = "operator" & gt; x & lt; / button & gt;
& lt; button id = "divide" class = "operator" & gt;: & lt; / button & gt;
& lt; / div & gt;
& lt; input id = "num2" / & gt;
& lt; button onclick = "func ()" & gt; equals ... & lt; / button & gt;
& lt; p id = "result" & gt; & lt; / p & gt;
& lt; script & gt;
function func () {
var num1 = Number (document.getElementById ("num1"). value);
var num2 = Number (document.getElementById ("num2"). value);
result = ???
document.getElementById ("result"). innerHTML = result;
}
& lt; / script & gt;
What will be the function of the result variable? Thanks for your help!
Answer 1, authority 100%
There are many options. For example, when you press an operator button, we set the variable of the current operator accordingly. Then, when you click on the button, equals , we calculate the result depending on the current operator.
& lt; input id = "num1" / & gt;
& lt; div id = "operator_btns" & gt;
& lt; button id = "plus" class = "operator" onclick = "op = '+'" & gt; + & lt; / button & gt;
& lt; button id = "minus" class = "operator" onclick = "op = '-'" & gt; - & lt; / button & gt;
& lt; button id = "times" class = "operator" onclick = "op = '*'" & gt; x & lt; / button & gt;
& lt; button id = "divide" class = "operator" onclick = "op = '/'" & gt;: & lt; / button & gt;
& lt; / div & gt;
& lt; input id = "num2" / & gt;
& lt; button onclick = "func ()" & gt; equals ... & lt; / button & gt;
& lt; p id = "result" & gt; & lt; / p & gt;
& lt; script & gt;
var op; // selected operator
function func () {
var result;
var num1 = Number (document.getElementById ("num1"). value);
var num2 = Number (document.getElementById ("num2"). value);
switch (op) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if (num2) {
result = num1 / num2;
} else {
result = 'infinity';
}
break;
default:
result = 'select an operation';
}
document.getElementById ("result"). innerHTML = result;
}
& lt; / script & gt; Answer 2, authority 60%
In a separate function for each operation, it makes no sense – because when changing an operation in the interface, only one action changes in the algorithm … and if we divide the logic into 4 functions, we cannot avoid duplication of the code of the rest, common actions (we will violate the DRY principle).
The switch solution is, in principle, the simplest (excluding the eval () option) and widespread.
It is better not to use “noodles” if..else if : there is an unspoken rule limiting the use of such a construction to three options – and we have four of them. Yes, readability won’t suffer too much from another else if , but there’s absolutely no need to “crawl over the edge” when you can write your code cleanly.
An example using modern JavaScript features:
Answer 3, authority 20%
There is also such an option
& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; meta charset = "UTF-8" / & gt;
& lt; title & gt; JS Calculator & lt; / title & gt;
& lt; style & gt;
body {display: flex; height: 100vh; }
#calculator {
margin: auto;
padding: 20px;
background: silver;
box-shadow: 0 0 10px black;
border-radius: 10px;
}
#display, button {
width: 100px;
padding: 10px;
margin: 10px;
border: 1px solid gray;
border-radius: 5px;
box-shadow: 2px 2px gray;
font: bold 3em Impact;
outline: none;
}
#display {
width: 460px;
text-align: right;
}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; div id = "calculator" & gt;
& lt; div class = "row" & gt;
& lt; input id = "display" type = "text" / & gt;
& lt; / div & gt;
& lt; div class = "row" & gt;
& lt; button onclick = "press ('7')" & gt; 7 & lt; / button & gt;
& lt; button onclick = "press ('8')" & gt; 8 & lt; / button & gt;
& lt; button onclick = "press ('9')" & gt; 9 & lt; / button & gt;
& lt; button onclick = "press ('+')" & gt; + & lt; / button & gt;
& lt; / div & gt;
& lt; div class = "row" & gt;
& lt; button onclick = "press ('4')" & gt; 4 & lt; / button & gt;
& lt; button onclick = "press ('5')" & gt; 5 & lt; / button & gt;
& lt; button onclick = "press ('6')" & gt; 6 & lt; / button & gt;
& lt; button onclick = "press ('-')" & gt; - & lt; / button & gt;
& lt; / div & gt;
& lt; div class = "row" & gt;
& lt; button onclick = "press ('1')" & gt; 1 & lt; / button & gt;
& lt; button onclick = "press ('2')" & gt; 2 & lt; / button & gt;
& lt; button onclick = "press ('3')" & gt; 3 & lt; / button & gt;
& lt; button onclick = "press ('*')" & gt; * & lt; / button & gt;
& lt; / div & gt;
& lt; div class = "row" & gt;
& lt; button onclick = "clear1 ()" & gt; C & lt; / button & gt;
& lt; button onclick = "press ('0')" & gt; 0 & lt; / button & gt;
& lt; button onclick = "calc ()" & gt; = & lt; / button & gt;
& lt; button onclick = "press ('/')" & gt; / & lt; / button & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt; script & gt;
let display = document.getElementById ("display");
function clear1 () {
display.value = "";
}
function calc () {
display.value = eval (display.value);
}
function press (x) {
display.value + = x;
}
& lt; / script & gt;
& lt; / body & gt;
Answer 4
You can make it a little more beautiful and simpler.
The code is not mine, but I considered it when I started learning js.
& lt; head & gt;
& lt; meta charset = "utf-8" / & gt;
& lt; title & gt; Calculator & lt; / title & gt;
& lt; style type = "text / css" & gt;
#calculator * {font-size: 16px;}
#calculator table {border: solid 3px silver; border-spacing: 3px; background-color: #EEE; }
#calculator table td {border-spacing: 3px;}
input.display {width: 166px; text-align: right;}
td.buttons {border-top: solid 1px silver;}
input [type = button] {width: 40px; height: 30px;}
& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; form name = "calc" id = "calculator" & gt;
& lt; table & gt;
& lt; tr & gt;
& lt; td & gt;
& lt; input type = "text" name = "input" size = "16" class = "display" & gt;
& lt; / td & gt;
& lt; / tr & gt;
& lt; tr & gt;
& lt; td class = "buttons" & gt;
& lt; input type = "button" name = "one" value = "1" OnClick = "calc.input.value + = '1'" & gt;
& lt; input type = "button" name = "two" value = "2" OnClick = "calc.input.value + = '2'" & gt;
& lt; input type = "button" name = "three" value = "3" OnClick = "calc.input.value + = '3'" & gt;
& lt; input type = "button" name = "add" value = "+" OnClick = "calc.input.value + = '+'" & gt;
& lt; br & gt;
& lt; input type = "button" name = "four" value = "4" OnClick = "calc.input.value + = '4'" & gt;
& lt; input type = "button" name = "five" value = "5" OnClick = "calc.input.value + = '5'" & gt;
& lt; input type = "button" name = "six" value = "6" OnClick = "calc.input.value + = '6'" & gt;
& lt; input type = "button" name = "sub" value = "-" OnClick = "calc.input.value + = '-'" & gt;
& lt; br & gt;
& lt; input type = "button" name = "seven" value = "7" OnClick = "calc.input.value + = '7'" & gt;
& lt; input type = "button" name = "eight" value = "8" OnClick = "calc.input.value + = '8'" & gt;
& lt; input type = "button" name = "nine" value = "9" OnClick = "calc.input.value + = '9'" & gt;
& lt; input type = "button" name = "mul" value = "x" OnClick = "calc.input.value + = '*'" & gt;
& lt; br & gt;
& lt; input type = "button" name = "clear" value = "c" OnClick = "calc.input.value = ''" & gt;
& lt; input type = "button" name = "zero" value = "0" OnClick = "calc.input.value + = '0'" & gt;
& lt; input type = "button" name = "doit" value = "=" OnClick = "calc.input.value = eval (calc.input.value)" & gt;
& lt; input type = "button" name = "div" value = "/" OnClick = "calc.input.value + = '/'" & gt;
& lt; / td & gt;
& lt; / tr & gt;
& lt; / table & gt;
& lt; / form & gt;
& lt; / body & gt;
I, however, hardly understand what application such calculators have in practice, tk. firstly, there is no checking for input characters (you need to limit the input), there is no error checking (for example, division by zero), there is no decimal separator.