Веб-страницу, которая вычисляет результаты четырех арифметических операций для двух чисел


Это код, который я написал для простых математических приложений с использованием JavaScript. В соответствии с поставленной задачей, я разбил программу на функции, которые выполняют вычисления. Но я предполагаю, что мой код выглядит очень большим:

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>



Комментарии
1 ответ

Одним из очевидных простых изменений, чтобы избежать ненужного назначения переменных. Например, просто написать

const a = Number(document.getElementById("first-number").value);

вместо


const firstInput = document.getElementById("first-number").value;

var firstNumb = Number(firstInput);

Вы также должны быть более последовательными с именами (напр. addTwoN и multiplNumb). myFunction нужно придумать имя получше; я предлагаю onInputUpdated.

Код можно упростить, рассматривая каждую из четырех операций как данные. Затем можно применить такое же преобразование на каждый элемент operations список.



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>



2
ответ дан 27 февраля 2018 в 07:02 Источник Поделиться