Question

您好，我的网站上有此代码

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

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

Answer 1

将所有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>

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

Answer 3

<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，因此，使用此方法，你可以用这样的方式重写你的代码，你只有一个函数用于这两个操作，只需传递elementIds作为参数和function，其中需要注意应用哪个操作。就像我上面写的那个。

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

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

3 个答案: