risposta-alla-domanda-sullo-sviluppo-web-bd.com

Come chiamare una funzione JS utilizzando l'evento OnClick

Sto cercando di chiamare la mia funzione JS che ho aggiunto nell'intestazione. Si prega di trovare sotto il codice che mostra lo scenario del mio problema. Nota: non ho accesso al corpo nella mia applicazione. Ogni volta che clicco sull'elemento con id="Save", si chiama f1() ma non fun(). Come posso farlo chiamare anche il mio fun()? Per favore aiuto.

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

Stai tentando di collegare una funzione listener di eventi prima che l'elemento sia caricato. Inserisci fun() all'interno di una funzione listener di eventi onload. Chiama f1() all'interno di questa funzione, poiché l'attributo onclick verrà ignorato.

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

Puoi usare addEventListener per aggiungere tutti gli ascoltatori che vuoi. 

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

Aggiungi anche il tag script dopo l'elemento per assicurarti che l'elemento Save sia caricato al momento dell'esecuzione dello script

Piuttosto che spostare tag script, è possibile chiamarlo quando dom è caricato. Quindi dovresti inserire il tuo codice all'interno del 

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

esempio

7
jonasnas

Ho rimosso il tuo document.getElementById("Save").onclick = prima delle tue funzioni, perché è un evento già chiamato sul tuo pulsante. Ho anche dovuto chiamare le due funzioni separatamente dall'evento 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

L'utilizzo dell'attributo onclick o l'applicazione di una funzione alle proprietà onclick di JS cancelleranno l'inizializzazione di onclick in.

Quello che devi fare è aggiungere fare clic sugli eventi sul tuo pulsante . Per farlo avrai bisogno dei metodi addEventListener e 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

Il codice in linea ha una precedenza più alta rispetto agli altri. Per chiamare l'altra funzione func () chiamatela da f1 ().

All'interno della tua funzione, aggiungi una linea,

function fun () {
// Your code here
}

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

fun ();

    }

Riscrivendo il tuo intero codice,

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