Question

我在JavaScript中使用简单函数具有计算器功能，如下所示：

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的值。

Answer 1

有些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>

Answer 2

使用以下自定义功能：

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

Answer 3

使用一个函数传递操作名称，而不是使用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>

Answer 4

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;
            }
        }

Answer 5

您可以定义单个函数并将按钮本身作为参数传递，然后根据按钮ID进行计算。

＆＃13;

 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 = "";
    }

＆＃13;

    
    <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>

＆＃13;

最小化js中重复的代码

5 个答案: