在一個網站上

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

在一個網站上

回答

相關問題