Web page that calculates results of four arithmetic operations for two numbers

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
3
down vote

favorite

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>

edited Feb 27 at 19:27

200_success

123k14142399

asked Feb 27 at 19:09

Kate Herasimenak

3016

add a commentÂ |Â

up vote
3
down vote

favorite

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>

edited Feb 27 at 19:27

200_success

123k14142399

asked Feb 27 at 19:09

Kate Herasimenak

3016

add a commentÂ |Â

up vote
3
down vote

favorite

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>

edited Feb 27 at 19:27

200_success

123k14142399

asked Feb 27 at 19:09

Kate Herasimenak

3016

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>

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>

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>

edited Feb 27 at 19:27

200_success

123k14142399

asked Feb 27 at 19:09

Kate Herasimenak

3016

edited Feb 27 at 19:27

200_success

123k14142399

edited Feb 27 at 19:27

200_success

123k14142399

edited Feb 27 at 19:27

200_success

123k14142399

asked Feb 27 at 19:09

Kate Herasimenak

3016

asked Feb 27 at 19:09

Kate Herasimenak

3016

asked Feb 27 at 19:09

Kate Herasimenak

3016

add a commentÂ |Â

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

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 at 19:54

200_success

123k14142399

add a commentÂ |Â

Your Answer

StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f188474%2fweb-page-that-calculates-results-of-four-arithmetic-operations-for-two-numbers%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

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 at 19:54

200_success

123k14142399

add a commentÂ |Â

up vote
2
down vote

accepted

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 at 19:54

200_success

123k14142399

add a commentÂ |Â

up vote
2
down vote

accepted

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 at 19:54

200_success

123k14142399

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>

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>

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 at 19:54

200_success

123k14142399

answered Feb 27 at 19:54

200_success

123k14142399

answered Feb 27 at 19:54

200_success

123k14142399

answered Feb 27 at 19:54

200_success

123k14142399

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

搜尋此網誌

trjhtr