如何使用OnClick事件调用JS函数

Question

如何使用OnClick事件调用JS函数

59

我正在尝试调用我在头部添加的JS函数。请查看下面显示我的问题场景的代码。

注意：我在应用程序中无法访问body。

每次我点击具有id="Save"的元素时，它只调用f1()而不是fun()。我如何使其调用我的fun()函数？

  <!DOCTYPE html>
  <html>
  <head>

  <script>

   document.getElementById("Save").onclick = function fun()
    {
     alert("hello");
     //validation code to see State field is mandatory.  
    }   

    function f1()
    {
       alert("f1 called");
       //form validation that recalls the page showing with supplied inputs.    
    }

  </script>
  </head>
  <body>
  <form name="form1" id="form1" method="post">
            State: 
            <select id="state ID">
               <option></option>
               <option value="ap">ap</option>
               <option value="bp">bp</option>
            </select>
   </form>

   <table><tr><td id="Save" onclick="f1()">click</td></tr></table>

   </body>
   </html>

- Vineeth Varma

f1根本不应该被调用，因为你有一个运行时错误。另请参见为什么jQuery或DOM方法（如getElementById）找不到元素？。但无论如何，func都不会运行，因为你没有在任何地方调用它。 - Felix Kling

7个回答

19

您可以使用addEventListener添加任意数量的监听器。

  document.getElementById("Save").addEventListener('click',function ()
    {
     alert("hello");
     //validation code to see State field is mandatory.  
    }  );

在元素后添加script标签，以确保在脚本运行时Save元素已加载

与其移动脚本标签，不如在dom加载时调用它。然后将您的代码放在

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("Save").addEventListener('click',function ()
    {
     alert("hello");
     //validation code to see State field is mandatory.  
    }  ); 
});

例子

- jonasnas

7

我将你的document.getElementById("Save").onclick =在函数前面删除了，因为这是一个已经被你的按钮调用的事件。我还需要通过onclick事件单独调用这两个函数。

     <!DOCTYPE html>
      <html>
      <head>
      <script>
       function fun()
        {
         alert("hello");
         //validation code to see State field is mandatory.  
        }   
        function f1()
        {
          alert("f1 called");
           //form validation that recalls the page showing with supplied inputs.    
        }
      </script>
      </head>
      <body>
      <form name="form1" id="form1" method="post">
                State: 
                <select id="state ID">
                   <option></option>
                   <option value="ap">ap</option>
                   <option value="bp">bp</option>
                </select>
       </form>

       <table><tr><td id="Save" onclick="f1(); fun();">click</td></tr></table>

   </body>
   </html>

- JORDANO

4

使用onclick属性或将函数应用于JS的onclick属性会擦除在<head>中初始化的onclick。

您需要做的是在按钮上添加点击事件。为此，您需要使用addEventListener或attachEvent（IE）方法。

<!DOCTYPE html>
<html>
<head>
    <script>
        function addEvent(obj, event, func) {
            if (obj.addEventListener) {
                obj.addEventListener(event, func, false);
                return true;
            } else if (obj.attachEvent) {
                obj.attachEvent('on' + event, func);
            } else {
                var f = obj['on' + event];
                obj['on' + event] = typeof f === 'function' ? function() {
                    f();
                    func();
                } : func
            }
        }

        function f1()
        {
            alert("f1 called");
            //form validation that recalls the page showing with supplied inputs.    
        }
    </script>
</head>
<body>
    <form name="form1" id="form1" method="post">
        State: <select id="state ID">
        <option></option>
        <option value="ap">ap</option>
        <option value="bp">bp</option>
        </select>
    </form>

    <table><tr><td id="Save" onclick="f1()">click</td></tr></table>

    <script>
        addEvent(document.getElementById('Save'), 'click', function() {
            alert('hello');
        });
    </script>
</body>
</html>

- eltyweb

1

你也可以使用一个iife匿名JavaScript函数来实现这个功能。请注意，虽然有时候没有其他选择，但这被认为是一种不好的做法。

...
<span onclick="(function() { // function code here })())">click me!</span>
...

- John Meyer

0

我同意乔治的观点。如果我们要通过JavaScript向HTML元素添加或绑定事件监听器，我们需要在DOM加载完成后执行。为此，我们可以使用JavaScript中的window.onload()函数。

<script>
   window.onload = function() {
      document.getElementById("Save").onclick = function fun() {
        alert("hello");
      }   
   }
</script>

另一种方法是在HTML中使用onclick事件处理程序，如下所示的代码：

<div onclick="myFunction()"></div>
<script>
   function myFunction() {
      alert("Hello");
   }
</script>

注意：不建议同时使用这两种方法。因为这样会导致在一次点击中调用两个函数，这会令人讨厌。

- Kailas

0

内联代码的优先级高于来自<head>标签或链接文件的代码。要调用另一个函数func()，请从f1()中调用它。

在您的函数内部，添加一行代码，

function fun () {
// Your code here
}

function f1()
    {
       alert("f1 called");
       //form validation that recalls the page showing with supplied inputs.    

fun ();

    }

重写你的整个代码，

 <!DOCTYPE html>
    <html>
      <head>
    
      <script>
    
       function fun()
        {
         alert("hello");
         //validation code to see State field is mandatory.  
        }   
    
        function f1()
        {
           alert("f1 called");
           //form validation that recalls the page showing with supplied inputs.   
           fun (); 
        }
    
      </script>
      </head>
      <body>
       <form name="form1" id="form1" method="post">
    
         State: <select id="state ID">
                   <option></option>
                   <option value="ap">ap</option>
                   <option value="bp">bp</option>
                </select>
       </form>
       <table><tr><td id="Save" onclick="f1()">click</td></tr></table>
    
      </body>
</html>

- Arunkumar Srisailapathi

"内联代码比其他代码具有更高的优先级" 这是什么意思？ - Felix Kling

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- George · Accepted Answer

你试图在元素加载之前附加事件监听器函数。将fun()放置在一个onload事件监听器函数内部。在该函数中调用f1()，因为onclick属性将被忽略。

function f1() {
    alert("f1 called");
    //form validation that recalls the page showing with supplied inputs.    
}
window.onload = function() {
    document.getElementById("Save").onclick = function fun() {
        alert("hello");
        f1();
        //validation code to see State field is mandatory.  
    }
}

JSFiddle