javascript - 如何从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();and 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>