it-swarm.com.de

So rufen Sie eine JS-Funktion mithilfe des OnClick-Ereignisses auf

Ich versuche, meine JS-Funktion aufzurufen, die ich im Header hinzugefügt habe. Im Folgenden finden Sie Code, der mein Problemszenario zeigt. Hinweis: Ich habe in meiner Anwendung keinen Zugriff auf den Körper. Jedes Mal, wenn ich mit id="Save" auf das Element klicke, ruft es nur f1() auf, jedoch nicht fun(). Wie kann ich es auch meine fun() anrufen lassen? Bitte helfen Sie.

  <!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>
37
Vineeth Varma

Sie versuchen, eine Ereignis-Listener-Funktion anzuhängen, bevor das Element geladen wird. Platzieren Sie fun() in einer onload-Ereignis-Listener-Funktion. Rufen Sie f1() innerhalb dieser Funktion auf, da das onclick-Attribut ignoriert wird.

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

30
George

Sie können addEventListener verwenden, um beliebig viele Listener hinzuzufügen. 

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

Fügen Sie auch das Tag script nach dem Element hinzu, um sicherzustellen, dass das Element Save zu dem Zeitpunkt geladen wird, zu dem das Skript ausgeführt wird

Anstatt das Skript-Tag zu verschieben, können Sie es aufrufen, wenn dom geladen ist. Dann sollten Sie Ihren Code in die 

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

Beispiel

7
jonasnas

Ich habe Ihre document.getElementById("Save").onclick = vor Ihren Funktionen entfernt, da dies ein Ereignis ist, das bereits auf Ihrer Schaltfläche aufgerufen wird. Ich musste die beiden Funktionen auch separat durch das Ereignis onclick aufrufen.

     <!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>
2
JORDANO

Wenn Sie das Onclick-Attribut verwenden oder eine Funktion auf Ihre JS-Onclick-Eigenschaften anwenden, wird Ihre Onclick-Initialisierung in gelöscht.

Was Sie tun müssen, ist add click -Ereignisse auf Ihrer Schaltfläche . Dazu benötigen Sie die Methoden addEventListener und 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>
1
eltyweb

Inline-Code hat eine höhere Priorität als die anderen. Um Ihre andere Funktion aufzurufen, rufen Sie func () mit f1 () auf.

Fügen Sie in Ihrer Funktion eine Zeile hinzu,

function fun () {
// Your code here
}

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

fun ();

    }

Den gesamten Code umschreiben,

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