Javascript一个站点上有两个计算器

Javascript Two calculators on one site

本文关键字：两个 计算器 一个 Javascript 站点      更新时间：2023-09-26

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

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

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

在一个脚本标记中编写所有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>

如果两个函数相等（您只想执行三个不同的元素），

在函数参数中使用元素的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>


<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>
  • 将所有脚本放在一个<script>标记中
  • 此外，你的计划还有改进的空间。请参见以下内容：

我可以看到，尽管你的按钮名为"calculate difference"，
第一形式是计算product而第二形式是计算difference，您可以重写代码，使两个操作都只有一个函数，只需传递CCD_ 5作为参数和CCD_。就像我上面写的那个。

请在此处查看：http://jsfiddle.net/1yo4ypc2/

相关文章：