\$\begingroup\$
\$\endgroup\$
This is the code that I have written for a simple mathematical application using javascript. In accordance with the task, I broke the program into functions that perform the computations. But I guess my code looks very large:
function addTwoN(a, b){
return (a + b);
}
function subtractNumb(a,b){
return (a - b);
}
function multiplNumb(a,b){
return (a * b);
}
function divisNumb(a,b){
return (a / b);
}
function myFunction(){
const firstInput = document.getElementById("first-number").value;
const secondInput = document.getElementById("second-number").value;
const result = document.getElementById("result");
var firstNumb = Number(firstInput);
var secondNumb = Number(secondInput);
var sum = addTwoN(firstNumb, secondNumb);
var sbtr = subtractNumb(firstNumb, secondNumb);
var multi = multiplNumb(firstNumb, secondNumb);
var divis = divisNumb(firstNumb, secondNumb);
var str =
firstNumb + " + " + secondNumb + " = " + sum + "<br>" +
firstNumb + " - " + secondNumb + " = " + sbtr + "<br>" +
firstNumb + " * " + secondNumb + " = " + multi + "<br>" +
firstNumb + " / " + secondNumb + " = " + divis;
result.innerHTML = str;
}<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<body>
<form class="ml-5 mb-5 mt-5">
<div class="form-group">
<label>What is the first number?</label>
<input type="number" class="form-control" name="" id="first-number" oninput="validity.valid||(value=''); myFunction()" min="0" style="width: 90px">
</div>
<div class="form-group">
<label>What is the second number?</label>
<input type="number" class="form-control" name="" oninput="validity.valid||(value=''); myFunction()" id="second-number" min="0" style="width: 90px">
</div>
</form>
<div class="ml-5" id="result"></div>
</body>
200_success
146k22 gold badges191 silver badges481 bronze badges
asked Feb 27, 2018 at 19:09
Kate Herasimenak
5535 silver badges12 bronze badges
1 Answer 1
\$\begingroup\$
\$\endgroup\$
0
One obvious simple change is to avoid making unnecessary variable assignments. For example, just write
const a = Number(document.getElementById("first-number").value);
instead of
const firstInput = document.getElementById("first-number").value; ... var firstNumb = Number(firstInput);
You should also be more consistent with naming (e.g. addTwoN vs. multiplNumb). myFunction needs a better name; I suggest onInputUpdated.
The code could be simplified by treating each of the four operations as data. Then, you apply the same transformation on each element of the operations list.
const operations = [
{symbol: '+', callback: function(a, b) { return a + b }},
{symbol: '-', callback: function(a, b) { return a - b }},
{symbol: '*', callback: function(a, b) { return a * b }},
{symbol: '/', callback: function(a, b) { return a / b }},
];
function onInputUpdated() {
const a = Number(document.getElementById("first-number").value);
const b = Number(document.getElementById("second-number").value);
const result = operations.map(function(op) {
return a + " " + op.symbol + " " + b + " = " + op.callback(a, b);
}).join('<br>');
document.getElementById("result").innerHTML = result;
}<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<body>
<form class="ml-5 mb-5 mt-5">
<div class="form-group">
<label>What is the first number?</label>
<input type="number" class="form-control" name="" id="first-number" oninput="validity.valid||(value=''); onInputUpdated()" min="0" style="width: 90px">
</div>
<div class="form-group">
<label>What is the second number?</label>
<input type="number" class="form-control" name="" oninput="validity.valid||(value=''); onInputUpdated()" id="second-number" min="0" style="width: 90px">
</div>
</form>
<div class="ml-5" id="result"></div>
</body>
answered Feb 27, 2018 at 19:54
200_success
146k22 gold badges191 silver badges481 bronze badges
You must log in to answer this question.
default