通過單擊按鈕調用具有返回值的函數時的正確做法

Question

<html>
   <head>
   <script type="text/javascript">

            function add(a,b) {
               var result = parseInt(a) + parseInt(b)
               return result
            }
      </script>
   </head>
   <body>
      <input type="text" name="numberOne" id="txtNumberOne" />
      <input type="text" name="numberTwo" id="txtNumberTwo" />
     <!-- <input type="button" id="btnClick" value="Add" /> -->
     <button id="btnClick">Add</button>

     <p id="answer"></p>  

<script>
    document.getElementById("btnClick").addEventListener("click", function(){
    var view = add(document.getElementById('txtNumberOne').value, document.getElementById('txtNumberTwo').value )
    document.getElementById("answer").innerHTML = view;
});
</script>


   </body>
</html>

題：

當調用帶有返回值的函數時，我將如何捕獲結果並顯示出來？

上面的代碼可以做到這一點，但是，這樣做是正確的做法嗎？ 我創建了一個addListnerEvent，當用戶單擊按鈕時，它將調用返回答案的函數，innerHTML將顯示答案。 如果沒有，正確的做法是什么？

Answer 1

這就是我要做的。 但是請注意，我缺少一些相關信息。 一些注意事項：

這只是一個答案，但是有很多不同種類的答案
我假設這兩個輸入確實彼此唯一。 因此，您不需要sum（input [i]），但是想要sum（a，b）。 否則真的會不同
我將使用document.querySelector()語法，該語法與jQuery和其他庫使用的語法更相似
形式是完全沒有意義的。 HTML是語義的，因此請返回其語義。 我假設這是某種銀行對帳單，但是請更改名稱以適合您的項目

請參閱jsfiddle中的演示。 碼：

<html>
  <body>
    <!-- inputs belong to a form -->
    <form class="totalpayment">
      <input class="paid" type="text" name="numberOne" />
      <input class="due" type="text" name="numberTwo" />
      <button class="gettotal">Add</button>
    </form>
    <p class="total"></p>  

    <!-- scripts are better at the end of the body -->
    <script>
      // Retrieve a number from an input element
      function getNumber(selector) {
        var rawValue = document.querySelector(selector).value;
        return parseInt(rawValue);
      }

      // Sum the value when submitting the form
      document.querySelector(".totalpayment").addEventListener("submit", function(e){
        e.preventDefault();
        var paid = getNumber('.paid');
        var due = getNumber('.due');
        document.querySelector(".total").innerHTML = paid + due;
      });
    </script> 
  </body>
</html>

或者使用jQuery，使用它可以使您的生活變得更加輕松，而且這確實很普遍。 請參閱jsfiddle中的演示。 碼：

<html>
  <body>
    <form class="totalpayment">
      <input class="paid" type="text" name="numberOne" />
      <input class="due" type="text" name="numberTwo" />
      <button>Add</button>
    </form>
    <p class="total"></p>  

    <script src="jquery.min.js"></script>
    <script>
      // Sum the value when submitting the form
      $(".totalpayment").submit(function(e){
        e.preventDefault();
        var paid = parseInt($('.paid').val());
        var due = parseInt($('.due').val());
        $(".total").html(paid + due);
      });
    </script> 
  </body>
</html>

當前不使用庫時，addEventListener和innerHTML都是最佳實踐（無論如何，它比element.onclick或inline onclick都要好得多）。

通過單擊按鈕調用具有返回值的函數時的正確做法

問題描述

1 個解決方案

解決方案1
0 2015-07-23 05:32:51

通過單擊按鈕調用具有返回值的函數時的正確做法

問題描述

1 個解決方案

解決方案1 0 2015-07-23 05:32:51

解決方案1
0 2015-07-23 05:32:51