如何从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>