JS - VoidCC

で繰り返しコードを最小限に次のように私は、単純な関数を使って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

あなたは 'A'と 'B'を取得し、それぞれの方法でそれを呼び出すための関数を作ることができます。 PSはあなたのbrのはこのようにする必要があります '
' – George

コードの上部に+ 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 = ""; 
}

あなたは、単一の機能をしたい場合。分割ボタンを乗算ボタンと4に、substractボタンのクリックで追加ボタン、2のクリック時にこの機能を

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 3：あなたは、次の関数を書くことができます。他の番号を渡してクリアします。あなたの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を返しても要素はクリアされません。 **編集後**：あなたの 'type'が何であっても' 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は自動的にすべての関数を呼び出します。 –

あなたは、単一の関数を定義することができ、パラメータとして、ボタン自体を通過し、その後に応じて計算を行いますボタンID。

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

答えて

関連する問題