在一个网站上

喜的Javascript两组计算器，我有我的site`这段代码在一个网站上

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

的问题是，第一种形式的心不是工作，二是工作。在我的网站上，我想要许多这些计算器，但我不知道为什么不工作。如果有人帮助我找到结果，我将会取得成绩。

来源

2014-09-23 Jiří Puc

你不能有两个在window.onload方法，http://stackoverflow.com/questions/16683176/add-two-functions-to-window-onload – Shamanth 2014-09-23 05:31:13

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

来源

2014-09-23 05:27:11 WisdmLabs

如果这两个功能是相等的（你只是要执行3种性差异的元素），

使用元素的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>

来源

2014-09-23 05:39:04

<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>标签。
此外，您的程序还有改进的空间。见下图：

我可以看到，eventhough你的按钮被命名为"calculate difference"，
的第一种形式计算product和第二形式计算difference，因此，利用这一点，你可以重写你的代码这样一种方式，你只有一个功能的两个操作，只是通过elementIds作为参数和function它负责哪些操作应用。就像我上面写的那个一样。

看到它在这里：http://jsfiddle.net/1yo4ypc2/

来源

2014-09-23 05:49:03 jcera

在一个网站上

回答

相关问题