Минимизация повторяющийся код в JS

У меня есть функциональность калькулятора в JavaScript, используя простые функции следующим образом: Минимизация повторяющийся код в JS

function add() { 
 
    var a = parseInt(document.getElementById("num1").value); 
 
    var b = parseInt(document.getElementById("num2").value); 
 

 
    var result = a + b; 
 
    document.getElementById("result").value = result; 
 
} 
 

 
function subtract() { 
 
    var a = parseInt(document.getElementById("num1").value); 
 
    var b = parseInt(document.getElementById("num2").value); 
 

 
    var result = a - b; 
 
    document.getElementById("result").value = result; 
 
} 
 

 
function multiply() { 
 
    var a = parseInt(document.getElementById("num1").value); 
 
    var b = parseInt(document.getElementById("num2").value); 
 

 
    var result = a * b; 
 
    document.getElementById("result").value = result; 
 
} 
 

 

 
function divide() { 
 
    var a = parseInt(document.getElementById("num1").value); 
 
    var b = parseInt(document.getElementById("num2").value); 
 

 
    var result = a/b; 
 
    document.getElementById("result").value = result; 
 
} 
 

 
function clearr() { 
 
    document.getElementById("num1").value = ""; 
 
    document.getElementById("num2").value = ""; 
 
    document.getElementById("result").value = ""; 
 
}

<span style="margin-right:1px">Number 1 </span> 
 
<input id="num1" type="number" ></br> 
 
<span style="margin-right:5px" >Number 2</span><input id="num2" type="number" ></br> 
 
<span style="margin-right:29px">Result</span><input id="result" type="number"> </br> 
 

 

 
<button id="add" onclick="add()">+</button> 
 
<button id="subtract" onclick="subtract()">-</button> 
 
<button id="multiply" onclick="multiply()">*</button> 
 
<button id="divide" onclick="divide()">/</button> 
 
<button id="clear" onclick="clearr()">clear</button>

Однако есть много повторяющегося кода. Есть ли другой способ решить эту проблему, не получая повторяющихся значений a и b каждый раз.

источник

2017-02-22 hemant patwal

Вы могли бы сделать функцию, чтобы получить '' Ā' и b', а затем вызвать, что в каждом методе. PS, вы должны быть такими, как это '
' – George

Определите a + b в верхней части кода и просто передайте его каждой функции –

, но я ожидаю, что одна функция выполнит все задачи и вернет все операции –

Используйте один имя функции прохождения операции, чем проверить его с if/switch. Для того, чтобы очистить все, просто передать в несуществующей операции:

function action(method) { 
 
    var a = parseInt(document.getElementById("num1").value); 
 
    var b = parseInt(document.getElementById("num2").value); 
 
    var result = null; 
 

 
    switch (method) { 
 
    case 'add': 
 
     result = a + b; 
 

 
     break; 
 
    case 'subtract': 
 
     result = a - b; 
 
     break; 
 
    case 'multiply': 
 
     result = a * b; 
 
     break; 
 
    case 'divide': 
 
     if (b != 0) { 
 
     result = a/b; 
 
     } else { 
 
     alert('Can\'t divide by 0'); 
 

 
     return; 
 
     } 
 

 
     break; 
 
    } 
 

 
    if (result !== null) { 
 

 
    document.getElementById("result").value = result; 
 
    } else { 
 

 
    document.getElementById("num1").value = ""; 
 
    document.getElementById("num2").value = ""; 
 
    document.getElementById("result").value = ""; 
 
    } 
 
}

<span style="margin-right:1px">Number 1 </span> 
 
<input id="num1" type="number"></br> 
 
<span style="margin-right:5px">Number 2</span><input id="num2" type="number"></br> 
 
<span style="margin-right:29px">Result</span><input id="result" type="number"> </br> 
 

 

 
<button id="add" onclick="action('add')">+</button> 
 
<button id="subtract" onclick="action('subtract')">-</button> 
 
<button id="multiply" onclick="action('multiply')">*</button> 
 
<button id="divide" onclick="action('divide')">/</button> 
 
<button id="clear" onclick="action('clear')">clear</button>

источник

2017-02-22 08:43:21 Justinas

Впервые увидел принятый отрицательный проголосовавший ответ ... –

Я не знаю причину downvote –

Вы можете оптимизировать и очистить свой код, как показано ниже:

var num1 = document.getElementById("num1"); 
var num2 = document.getElementById("num2"); 
var result = document.getElementById("result"); 

function add(){ 
    result.value = parseInt(num1.value) + parseInt(num2.value); 
} 

function subtract(){ 
    result.value = parseInt(num1.value) - parseInt(num2.value); 
} 

function multiply(){ 
    result.value = parseInt(num1.value) * parseInt(num2.value); 
} 


function divide(){ 
    result.value = parseInt(num1.value)/parseInt(num2.value); 
} 

function clear(){ 
    num1.value = ""; 
    num2.value = ""; 
    result.value = ""; 
}

если вы хотите одну функцию. Вы можете написать следующую функцию:

function PerformCalculation(calType){ 

    var num1 = document.getElementById("num1"); 
    var num2 = document.getElementById("num2"); 
    var result = document.getElementById("result");   

    switch(calType) { 
     case 1: 
      result.value = parseInt(num1.value) + parseInt(num2.value); 
      break; 
     case 2: 
      result.value = parseInt(num1.value) - parseInt(num2.value); 
      break; 
     case 3: 
      result.value = parseInt(num1.value) * parseInt(num2.value); 
      break; 
     case 4: 
      result.value = parseInt(num1.value)/parseInt(num2.value); 
      break; 
     default: 
      result.value =""; 
      num1.value = ""; 
      num2.value = ""; 
    } 
}

вызова calType 1 к этой функции на нажатие кнопки добавления, 2 на нажатие кнопки вычитаем 3 на кнопку умножения и 4 на кнопке разделения. Пропустите любое другое число, чтобы очистить его. Ваш HTML будет иметь следующий вид:

<button id="add" onclick="PerformCalculation(1)">+</button> 
<button id="subtract" onclick="PerformCalculation(2)">-</button> 
<button id="multiply" onclick="PerformCalculation(3">*</button> 
<button id="divide" onclick="PerformCalculation(4)">/</button> 
<button id="clear" onclick="PerformCalculation(0)">clear</button>

источник

2017-02-22 08:38:18

Его право, но мне нужна единственная функция, которая вернет значения всех операций. –

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

Используйте следующую пользовательскую функцию:

function doOperation(type) { 
    var a_el = document.getElementById("num1"), 
     b_el = document.getElementById("num2"), 
     a = parseInt(a_el.value), 
     b = parseInt(b_el.value), 
     result = document.getElementById("result"); 

    switch (type) { 
     case '+': 
      result.value = a + b; 
      break; 
     case '-': 
      result.value = a - b; 
      break; 
     case '*': 
      result.value = a * b; 
      break; 
     case '/': 
      result.value = a/b; 
      break; 
     default: 
      a_el.value = ''; 
      b_el.value = ''; 
      result.value = ''; 
      break; 
    }  
}

Использование:

doOperation('*'); // multiplication 
doOperation(); // clearing

источник

2017-02-22 08:43:12 RomanPerekhrest

Где находится 'clear()'? Возврат 0 не очищает элемент. ** После редактирования **: независимо от того, что ваш 'тип', ваши случаи отсутствуют' break', так что только окончательный 'default' будет выполнен – Justinas

@Justinas, это был несчастный случай, проверьте мое обновление – RomanPerekhrest

const utilsConfig = { 
      numOne: parseInt(document.getElementById("num1").innerText), 
      numTwo: parseInt(document.getElementById("num2").innerText), 
      result : document.getElementById("result"), 
      maths: function (func) { 
       this.result.innerText = this[func](); 
      }, 
      add: function() { 
       return this.numOne + this.numTwo; 
      }, 
      subtract: function() { 
       return this.numOne - this.numTwo; 
      }, 
      multiply: function() { 
       return this.numOne * this.numTwo; 
      }, 
      divide:function() { 
       return this.numOne/this.numTwo; 
      }, 
      clearr: function() { 
       this.numOne.innerText = 0; 
       this.numTwo.innerText = 0; 
       return 0; 
      } 
     }

источник

2017-02-22 08:56:14

У вас все еще есть повторение кода в каждой функции, вы просто обертываете его в переменную. – Justinas

Я создал несколько функций для разделения функций. –

@Justinas: utilsConfig.Math автоматически вызовет все функции. –

Вы можете определить одну функцию и передать саму кнопку в качестве параметра, а затем сделать расчет в соответствии с идентификатор кнопки.

function doCalc(btn) { 
 
     var a = parseInt(document.getElementById("num1").value); 
 
     var b = parseInt(document.getElementById("num2").value); 
 
     var result = 0; 
 
    
 
     if(btn.id == 'add'){ 
 
      result = a + b;  
 
     }else if(btn.id == 'subtract'){ 
 
      result = a - b; 
 
     }else if(btn.id == 'multiply'){ 
 
      result = a * b; 
 
     }else if(btn.id == 'divide'){ 
 
      result = a/b; 
 
     }else{ 
 
      alert("Action undefined"); 
 
      return; 
 
     } 
 
     
 
     document.getElementById("result").value = result; 
 
    } 
 
    
 
    function clearr() { 
 
     document.getElementById("num1").value = ""; 
 
     document.getElementById("num2").value = ""; 
 
     document.getElementById("result").value = ""; 
 
    }

 
 
    <span style="margin-right:1px">Number 1 </span> 
 
    <input id="num1" type="number" ></br> 
 
    <span style="margin-right:5px" >Number 2</span><input id="num2" type="number" ></br> 
 
    <span style="margin-right:29px">Result</span><input id="result" type="number"> </br> 
 
    
 
    
 
    <button id="add" onclick="doCalc(this)">+</button> 
 
    <button id="subtract" onclick="doCalc(this)">-</button> 
 
    <button id="multiply" onclick="doCalc(this)">*</button> 
 
    <button id="divide" onclick="doCalc(this)">/</button> 
 
    <button id="clear" onclick="clearr()">clear</button>

источник

2017-02-22 08:59:28

Некоторые higher-order functions должны помочь вам в этом.

var ids = ['num1', 'num2', 'result']; 
 

 
function getVal (id) { 
 
    return parseInt(document.getElementById(id).value); 
 
} 
 

 
function setVal (id, result) { 
 
    document.getElementById(id).value = result; 
 
} 
 

 
function setCalc(func) { 
 
    setVal(ids[2], func(getVal(ids[0]), getVal(ids[1]))); 
 
} 
 

 
function clearAll() { 
 
    ids.map(function(id) {setVal(id, '');}); 
 
} 
 

 
function add (a, b) {return a + b;} 
 
function subtract (a, b) {return a - b;} 
 
function multiply (a, b) {return a * b;} 
 
function divide (a, b) {return a/b;}

<span style="margin-right:1px">Number 1 </span> 
 
<input id="num1" type="number" ></br> 
 
<span style="margin-right:5px" >Number 2</span><input id="num2" type="number" ></br> 
 
<span style="margin-right:29px">Result</span><input id="result" type="number"> </br> 
 

 
<button id="add" onclick="setCalc(add);">+</button> 
 
<button id="subtract" onclick="setCalc(subtract);">-</button> 
 
<button id="multiply" onclick="setCalc(multiply);">*</button> 
 
<button id="divide" onclick="setCalc(divide);">/</button> 
 
<button id="clear" onclick="clearAll();">clear</button>

источник

2017-02-22 10:46:14 icc97

Минимизация повторяющийся код в JS

ответ

Смежные вопросы