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

IT技术 javascript html forms validation html-validation
2021-03-06 04:24:52

我正在尝试调用我在标题中添加的 JS 函数。请找到以下显示我的问题场景的代码。注意：我无权访问我的应用程序中的正文。每次我点击元素时，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>
6个回答

您正在尝试在加载元素之前附加事件侦听器函数。放置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

@VineethVarma 然后请发布您使用过的代码。
2021-05-05 04:24:52
我无权访问正文中的代码。我的应用程序与上面的代码不同。无论如何现在，即使按照您的建议，它也只调用 fun() 而不是 f1()。
2021-05-15 04:24:52
@VineethVarma 编辑完成。
2021-05-16 04:24:52

您可以使用 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.  
    }  ); 
});

例子

我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>

使用该onclick属性或将函数应用于您的 JSonclick属性将删除您onclick在<head>.

您需要做的是在按钮上添加点击事件。为此，您需要使用addEventListeneror 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>

您也可以使用iife使用匿名 javascript 函数执行此操作。请注意，这被认为是一种不好的做法，尽管在极少数情况下别无选择。

...
<span onclick="(function() { // function code here })())">click me!</span>
...
其它你可能感兴趣的问题
上一篇在不提交表单的情况下触发自动完成 下一篇找不到socket.io.js