在一个站点上使用Javascript编写两个计算器_Javascript_Forms_Calculator_Counting

在一个站点上使用Javascript编写两个计算器

javascript forms

在一个站点上使用Javascript编写两个计算器,javascript,forms,calculator,counting,Javascript,Forms,Calculator,Counting,嗨，我的网站上有这个代码` <body> <script> function calcResult() { document.getElementById('result').innerHTML = ''; var num1 = new Number(document.getElementById('txt1').value); var num2 = new Number(do

嗨，我的网站上有这个代码`

<body>
    <script>
        function calcResult() {
            document.getElementById('result').innerHTML = '';
            var num1 = new Number(document.getElementById('txt1').value);
            var num2 = new Number(document.getElementById('txt2').value);
            if (isNaN(num1) || isNaN(num2)) {
                alert('One or both inputs are not a number');
            } else {
                document.getElementById('result').innerHTML = num1 * num2;
            }
        }
        window.onload = function() {
            document.getElementById('btnCalc').onclick = calcResult;
        }
    </script>
    <div>
        Enter value 1
        <input type="text" id="txt1" />
        <br />Enter value 2
        <input type="text" id="txt2" />
        <br />
        <button id="btnCalc">Calculate difference</button>
        <div id="result"></div>
    </div>
    <script>
        function test() {
            document.getElementById('re').innerHTML = '';
            var n1 = new Number(document.getElementById('od1').value);
            var n2 = new Number(document.getElementById('od2').value);
            if (isNaN(n1) || isNaN(n2)) {
                alert('One or both inputs are not a number');
            } else {
                document.getElementById('re').innerHTML = n1 - n2;
            }
        }
        window.onload = function() {
            document.getElementById('od').onclick = test;
        }
    </script>
    <div>
        Enter value 1
        <input type="text" id="od1" />
        <br />Enter value 2
        <input type="text" id="od2" />
        <br />
        <button id="od">Calculate difference</button>
        <div id="re"></div>
    </div>
</body>


函数calcResult（）{
document.getElementById（'result'）。innerHTML=''；
var num1=新编号（document.getElementById（'txt1'）.value）；
var num2=新编号（document.getElementById（'txt2'）.value）；
if（isNaN（num1）| isNaN（num2））{
警报（“一个或两个输入不是数字”）；
}否则{
document.getElementById（'result'）.innerHTML=num1*num2；
}
}
window.onload=函数（）{
document.getElementById（'btnCalc'）。onclick=calcResult；
}
输入值1

输入值2


计算差额
功能测试（）{
document.getElementById（'re'）。innerHTML=''；
var n1=新编号（document.getElementById（'od1'）.value）；
var n2=新编号（document.getElementById（'od2'）.value）；
if（isNaN（n1）| isNaN（n2））{
警报（“一个或两个输入不是数字”）；
}否则{
document.getElementById（'re'）.innerHTML=n1-n2；
}
}
window.onload=函数（）{
document.getElementById（'od'）。onclick=test；
}
输入值1

输入值2


计算差额

问题是第一种形式不起作用，第二种形式起作用。在我的网站上，我想要很多这样的计算器，但我不知道为什么它不工作。如果有人帮我找到结果，我会满分。

在一个脚本标记中编写所有javascript代码。请尝试以下代码

<body>
    <script>
                    function calcResult(){

            document.getElementById('result').innerHTML = '';
            var num1 = new Number(document.getElementById('txt1').value);
            var num2 = new Number(document.getElementById('txt2').value);
            if(isNaN(num1) || isNaN(num2)){
                alert('One or both inputs are not a number');
            } else {
                document.getElementById('result').innerHTML = num1 * num2;
            }
        }
           function test(){
            document.getElementById('re').innerHTML = '';
            var n1 = new Number(document.getElementById('od1').value);
            var n2 = new Number(document.getElementById('od2').value);
            if(isNaN(n1) || isNaN(n2)){
                alert('One or both inputs are not a number');
            } else {
                document.getElementById('re').innerHTML = n1 - n2;
            }
        }
        window.onload=function(){
            document.getElementById('btnCalc').onclick = calcResult;
            document.getElementById('od').onclick = test;
        }
    </script>
    <div>
        Enter value 1 <input type="text" id="txt1" /><br />
        Enter value 2 <input type="text" id="txt2" /><br />
        <button id="btnCalc">Calculate difference</button>
        <div id="result"></div>
    </div>

    <div>
        Enter value 1 <input type="text" id="od1" /><br />
        Enter value 2 <input type="text" id="od2" /><br />
        <button id="od">Calculate difference</button>
        <div id="re"></div>
    </div>
</body>


函数calcResult（）{
document.getElementById（'result'）。innerHTML=''；
var num1=新编号（document.getElementById（'txt1'）.value）；
var num2=新编号（document.getElementById（'txt2'）.value）；
if（isNaN（num1）| isNaN（num2））{
警报（“一个或两个输入不是数字”）；
}否则{
document.getElementById（'result'）.innerHTML=num1*num2；
}
}
功能测试（）{
document.getElementById（'re'）。innerHTML=''；
var n1=新编号（document.getElementById（'od1'）.value）；
var n2=新编号（document.getElementById（'od2'）.value）；
if（isNaN（n1）| isNaN（n2））{
警报（“一个或两个输入不是数字”）；
}否则{
document.getElementById（'re'）.innerHTML=n1-n2；
}
}
window.onload=function（）{
document.getElementById（'btnCalc'）。onclick=calcResult；
document.getElementById（'od'）。onclick=test；
}
输入值1

输入值2

计算差额
输入值1

输入值2

计算差额

如果两个函数相等（您只需要执行三个差异元素）

在函数参数中使用元素的Id作为参数，并使用任何差异Id随时调用它

<body>
<script>
<div>
    Enter value 1 <input type="text" id="txt1" /><br />
    Enter value 2 <input type="text" id="txt2" /><br />
    <button id="btnCalc">Calculate difference</button>
    <div id="result"></div>
</div>
<script>
    function test(id){
        document.getElementById(id, id2, id3).innerHTML = '';
        var n1 = new Number(document.getElementById(id2).value);
        var n2 = new Number(document.getElementById(id3).value);
        if(isNaN(n1) || isNaN(n2)){
            alert('One or both inputs are not a number');
        } else {
            document.getElementById(id).innerHTML = n1 - n2;
        }
    }
    window.onload=function(){
        document.getElementById('btnCalc').onclick = function(){ test("result", "txt1", "txt2") };
        document.getElementById('od').onclick = function(){ test("re", "od1", "od2") };
    }
</script>
<div>
    Enter value 1 <input type="text" id="od1" /><br />
    Enter value 2 <input type="text" id="od2" /><br />
    <button id="od">Calculate difference</button>
    <div id="re"></div>
</div>


输入值1

输入值2

计算差额
功能测试（id）{
getElementById（id，id2，id3）.innerHTML=''；
var n1=新编号（document.getElementById（id2.value））；
var n2=新编号（document.getElementById（id3.value））；
if（isNaN（n1）| isNaN（n2））{
警报（“一个或两个输入不是数字”）；
}否则{
document.getElementById（id）.innerHTML=n1-n2；
}
}
window.onload=function（）{
document.getElementById（'btnCalc'）.onclick=function（）{test（“result”，“txt1”，“txt2”）}；
document.getElementById（'od'）.onclick=function（）{test（“re”，“od1”，“od2”）}；
}
输入值1

输入值2

计算差额


函数calcResult（resultId，valId，val2Id，operation）{
var$result=document.getElementById（resultId）；
$result.innerHTML=''；
var num1=新编号（document.getElementById（valId）.value）；
var num2=新编号（document.getElementById（val2Id）.value）；
if（isNaN（num1）| isNaN（num2））{
警报（“一个或两个输入不是数字”）；
}否则{
$result.innerHTML=操作（num1，num2）；
}
}
window.onload=函数（）{
document.getElementById（'btnCalc'）。onclick=function（）{
calcResult（'result'，'txt1'，'txt2'，函数（num1，num2）{
返回num1*num2；
});
}
document.getElementById（'od'）。onclick=function（）{
calcResult（'re'，'od1'，'od2'，函数（num1，num2）{
返回num1-num2；
});
};
}

将所有脚本放在一个
标记中
此外，你的计划还有改进的余地。见下文：

我可以看到，即使您的按钮名为“计算差异”，
第一种形式是计算

产品

，第二种形式是计算

差异

，因此，您可以重写代码，使两个操作只有一个函数，只需将

elementid

作为参数传递，并使用

函数

，该函数负责应用哪个操作。就像我上面写的

请参见此处：

您不能有两个window.onload方法，

<script type="text/javascript">
function calcResult(resultId, valId, val2Id, operation) {
    var $result = document.getElementById(resultId);
    $result.innerHTML = '';
    var num1 = new Number(document.getElementById(valId).value);
    var num2 = new Number(document.getElementById(val2Id).value);
    if (isNaN(num1) || isNaN(num2)) {
        alert('One or both inputs are not a number');
    } else {
        $result.innerHTML = operation(num1, num2);
    }
}
window.onload = function() {
    document.getElementById('btnCalc').onclick = function() {
        calcResult('result', 'txt1', 'txt2', function(num1, num2) {
            return num1 * num2;
        });
    }
    document.getElementById('od').onclick = function() {
        calcResult('re', 'od1', 'od2', function(num1, num2) {
            return num1 - num2;
        });
    };
}
</script>