2014-01-31 16 views
29

Ich versuche, meine JS-Funktion aufzurufen, die ich in der Kopfzeile hinzugefügt habe. Hier finden Sie den Code, der mein Problemszenario zeigt. Hinweis: Ich habe keinen Zugriff auf den Körper in meiner Anwendung. Jedes Mal, wenn ich auf das Element mit id="Save" klicke, ruft es nur f1(), aber nicht fun(). Wie kann ich es anrufen, selbst meine fun()? Bitte helfen.So rufen Sie eine JS-Funktion mit OnClick-Ereignis auf

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

'f1' sollte überhaupt nicht aufgerufen werden, weil Sie einen Laufzeitfehler haben. Siehe auch [Warum findet jQuery oder eine DOM-Methode wie 'getElementById' das Element nicht?] (Http://stackoverflow.com/q/14028959/218196). Aber 'func' läuft sowieso nicht, weil du es nirgends anrufst. –

Antwort

0

Inline-Code hat Vorrang vor den anderen. Um Ihre andere Funktion aufzurufen, rufen Sie func() von f1() auf.

In Ihrer Funktion, fügen Sie eine Zeile,

function fun() { 
// Your code here 
} 

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

fun(); 

    } 

Umschreiben Ihren ganzen Code,

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

* "Inline-Code hat Vorrang vor den anderen" * Was bedeutet das? –

23

Sie versuchen, ein Ereignis-Listener-Funktion an, bevor das Element geladen wird. Platziere fun() in einer onload Ereignis-Listener-Funktion. Rufen Sie innerhalb dieser Funktion f1() 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

+0

Ich habe keinen Zugriff auf den Code im Körper. Meine Bewerbung unterscheidet sich vom obigen Code.Anyways Now, auch nach Ihrem Vorschlag ruft es nur fun(), aber nicht f1(). –

+0

@VineethVarma dann bitte Code, den Sie verwendet haben. –

+0

@VineethVarma Bearbeitung vorgenommen. – George

6

Sie addEventListener nutzen könnten so viele Zuhörer hinzufügen, wie Sie wollen.

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

Auch script Tag nach dem Elemente hinzufügen, um sicherzustellen, Save Element zu dem Zeitpunkt geladen wird, wenn Skript

läuft

Anstatt Script-Tag bewegt man es nennen könnte, wenn dom geladen wird. Dann sollten Sie Ihren Code innerhalb der

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

example

0

Mit Onclick-Attribut oder eine Funktion gelten für Ihre JS Eigenschaften Onclick in Ihrem Onclick Initialisierung löschen.

Was Sie tun müssen, ist hinzufügen klicken Sie Ereignisse auf Ihrer Schaltfläche. Dazu benötigen Sie addEventListener und attachEvent (dh) -Methoden.

<!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> 
-4
function validate() { 

    if(document.myForm.phonenumber.value == "") { 
     alert("Please provide your phonenumber!"); 
     phonenumber.focus; 
     return false; 
    } 
    if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.email.value)) { 
     return (true) 
    } 
    alert("You have entered an invalid email address!"); 
    return (false); 
} 
1

ich entfernt Ihre document.getElementById("Save").onclick = vor Ihren Funktionen, weil es ein Ereignis ist bereits auf Ihrer Taste aufgerufen wird. Ich musste auch die beiden Funktionen durch das onclick-Ereignis getrennt 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> 
Verwandte Themen