如何在一个html页面上使用js进行2次乘法运算

How to make 2 multiplications with js on a single html page

本文关键字：js 进行 2次 运算 html 一个      更新时间：2023-09-26

我想用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

但它不起作用。。。

救命！

感谢

您可以让calculate()接受三个参数，这样它就可以用任何三个元素进行计算。

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

这是我的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);
相关文章：