如何從HTML調用JavaScript函數

Question

在這種情況下，我們如何從HTML調用start（）javascript函數

    (function() {
      var never, start;

      never = function() {
       return alert("try");
     }; 

      start = function() {
       return alert("try harder");
     };


    }).call(this);

我的HTML

    <input type="button" value="press" onclick="never()" ></input>

Answer 1

將事件處理程序代碼分配給屬性時，所使用的任何函數都必須在全局變量作用域中可用。

為此，可以使它們成為window屬性。 當前， never start函數在IIFE函數范圍內。

   // IIFE function
(function() {

  //  var never, start;  // local variables

     // Make the functions globally scoped
   window.never = function() {
      return alert("try");
   }; 

   window.start = function() {
      return alert("try harder");
   };
}).call(this);

---

如果願意，可以公開一個名稱空間

   // IIFE function
(function() {

   var ns = window.ns = {};

     // Make the functions globally scoped
   ns.never = function() {
      return alert("try");
   }; 

   ns.start = function() {
      return alert("try harder");
   };
}).call(this);

然后將內聯處理程序更改為使用ns.never(); 和ns.start(); 。

Answer 2

首先給您的輸入標簽一個ID：

<input id="someInputField" type="button" ... />

接下來，在文檔准備就緒時通過執行代碼在其上注冊回調：

$(document).ready( function() {
    // define a function called never
    function never() {
        alert( 'Never say never');
    }

    // register a function on the click event handler of that input tag:
    $('#someInputField').click( never );
});

Answer 3

您可能會發現使用jQuery之類的JavaScript庫更加容易。 使用該庫，您可以執行以下操作：

<script type="text/javascript">
    $(document).ready(function() {
        var count = 0
        $("#tryme").click(function () {
            if (count == 0) {
                alert('try');
                count++
            }
            else if (count == 1) {
                alert('try harder');
            }
        });
    });
</script>

<input type="button" value="press" id="tryme" ></input>