単一のhtmlページでjsと2回の乗算を行う方法

Question

jsを使用して同じhtmlページで2回の乗算を行いたいとします。乗算ボックスがあるように、私は別のものを作りたい。これは私のコード

var a = document.getElementById("a"); 
var b = document.getElementById("b"); 
var c = document.getElementById("c"); 
var xstored = a.getAttribute("data-in"); 
var ystored = b.getAttribute("data-in"); 

setInterval(function(){ 
    if(a == document.activeElement){ 
     var temp = a.value; 
     if(xstored != temp){ 
      xstored = temp; 
      a.setAttribute("data-in",temp); 
      calculate(); 
     } 
    } 
    if(b == document.activeElement){ 
     var temp = b.value; 
     if(ystored != temp){ 
      ystored = temp; 
      b.setAttribute("data-in",temp); 
      calculate(); 
     } 
    } 
},50); 

function calculate(){ 
    c.innerHTML = a.value * b.value; 
} 

a.onblur = calculate; 
calculate(); 

だから、これは私のコードがある...

であると私は、このコードの2を作りたいが、私は

a --> d 
b --> e 
c --> f 

に取って代わるだろうが、それは動作しません。 ..

お願いします！

おかげ

Answer 1

あなたはそれがどんな三つの要素で計算を行うことができますので、calculate()は3つの引数を受け入れる作ることができます。

function calculate(input1, input2, output) { 
    output.innerHTML = input1.value * input2.value; 
} 

calculate(a, b, c); 
calculate(d, e, f); 

編集：より完全な画像。すべての変数を設定するのと同じように、getElementByIdとgetAttributeを使用してください。私は、dとeの場合、aとbで行ったことをすべて繰り返すことを前提としています。もっと意味のある意味を持つ変数名を実際に使うべきです。

// Get all your elements stores 
var a, b, c, d, e, f; 
var astored, bstored, dstored, estored; 

function calculate(input1, input2, output) { 
    output.innerHTML = input1.value * input2.value; 
} 

setInterval(function(){ 
    var temp; 

    if (a == document.activeElement) { 
     temp = a.value; 
     if (astored != temp){ 
      astored = temp; 
      a.setAttribute("data-in",temp); 
      calculate(a, b, c); 
     } 
    } else if (b == document.activeElement) { 
     temp = b.value; 
     if (bstored != temp) { 
      bstored = temp; 
      b.setAttribute("data-in",temp); 
      calculate(a, b, c); 
     } 
    } else if (d == document.activeElement) { 
     temp = d.value; 
     if (dstored != temp) { 
      dstored = temp; 
      d.setAttribute("data-in",temp); 
      calculate(d, e, f); 
     } 
    } else if (e == document.activeElement) { 
     temp = e.value; 
     if (estored != temp) { 
      estored = temp; 
      e.setAttribute("data-in",temp); 
      calculate(d, e, f); 
     } 
    } 
}, 50); 

a.onblur = calculate(a, b, c); 
b.onblur = calculate(a, b, c); 
d.onblur = calculate(d, e, f); 
e.onblur = calculate(d, e, f); 
calculate(a, b, c); 
calculate(d, e, f); 

Answer 2

これは、h、i、jの新しいコードです。ありがとう！

// Get all your elements stores 
var a = document.getElementById("a"); 
var b = document.getElementById("b"); 
var c = document.getElementById("c"); 
var d = document.getElementById("d"); 
var e = document.getElementById("e"); 
var f = document.getElementById("f"); 
var h = document.getElementById("h"); 
var i = document.getElementById("i"); 
var j = document.getElementById("j"); 
var astored = a.getAttribute("data-in"); 
var bstored = b.getAttribute("data-in"); 
var dstored = d.getAttribute("data-in"); 
var estored = e.getAttribute("data-in"); 
var hstored = h.getAttribute("data-in"); 
var istored = i.getAttribute("data-in"); 

function calculate(input1, input2, output) { 
    output.innerHTML = input1.value * input2.value; 
} 

setInterval(function(){ 
    var temp; 

    if (a == document.activeElement) { 
     temp = a.value; 
     if (astored != temp){ 
      astored = temp; 
      a.setAttribute("data-in",temp); 
      calculate(a, b, c); 
     } 
    } else if (b == document.activeElement) { 
     temp = b.value; 
     if (bstored != temp) { 
      bstored = temp; 
      b.setAttribute("data-in",temp); 
      calculate(a, b, c); 
     } 
    } else if (d == document.activeElement) { 
     temp = d.value; 
     if (dstored != temp) { 
      dstored = temp; 
      d.setAttribute("data-in",temp); 
      calculate(d, e, f); 
     } 
    } else if (e == document.activeElement) { 
     temp = e.value; 
     if (estored != temp) { 
      estored = temp; 
      e.setAttribute("data-in",temp); 
      calculate(d, e, f); 
     } 
    } else if (h == document.activeElement) { 
     temp = h.value; 
     if (hstored != temp) { 
      hstored = temp; 
      h.setAttribute("data-in",temp); 
      calculate(h, i, j); 
     } 
    } else if (i == document.activeElement) { 
     temp = i.value; 
     if (istored != temp) { 
      istored = temp; 
      i.setAttribute("data-in",temp); 
      calculate(h, i, j); 
     } 
    } 
}, 50); 

a.onblur = calculate(a, b, c); 
b.onblur = calculate(a, b, c); 
d.onblur = calculate(d, e, f); 
e.onblur = calculate(d, e, f); 
h.onblur = calculate(h, i, j); 
i.onblur = calculate(h, i, j); 
calculate(a, b, c); 
calculate(d, e, f); 
calculate(h, i, j);