web-dev-qa-db-fra.com

Comment appeler une fonction JS en utilisant l'événement OnClick

J'essaie d'appeler ma fonction JS que j'ai ajoutée dans l'en-tête. Veuillez trouver ci-dessous le code qui montre mon scénario de problème. Remarque: je n’ai pas accès au corps de ma candidature. Chaque fois que je clique sur l'élément avec id="Save", il appelle uniquement f1() mais pas fun(). Comment puis-je le faire appeler même mon fun()? Please help.

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

Vous essayez de joindre une fonction d'écoute d'événement avant que l'élément ne soit chargé. Placez fun() dans une fonction d'écoute d'événement onload. Appelez f1() dans cette fonction, car l'attribut onclick sera ignoré.

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

Vous pouvez utiliser addEventListener pour ajouter autant d'auditeurs que vous le souhaitez. 

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

Ajoutez également la balise script après l'élément pour vous assurer que l'élément Save est chargé au moment de l'exécution du script.

Plutôt que de déplacer une balise de script, vous pouvez l'appeler lorsque dom est chargé. Ensuite, vous devez placer votre code dans le 

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

Exemple

7
jonasnas

J'ai supprimé votre document.getElementById("Save").onclick = avant vos fonctions, car c'est un événement déjà appelé sur votre bouton. J'ai également dû appeler les deux fonctions séparément par l'événement 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>
2
JORDANO

Utiliser l'attribut onclick ou appliquer une fonction à vos propriétés JS onclick effacera votre initialisation onclick dans.

Ce que vous devez faire, c'est ajouter cliquer sur les événements sur votre bouton . Pour ce faire, vous aurez besoin des méthodes addEventListener et 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

Le code en ligne a une priorité plus élevée que les autres. Pour appeler votre autre fonction func (), appelez-la depuis le f1 ().

Dans votre fonction, ajoutez une ligne,

function fun () {
// Your code here
}

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

fun ();

    }

Réécrire tout votre 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
Arunkumar Srisailapathi