Hoe een JS-functie aan te roepen met behulp van OnClick-gebeurtenis

Ik probeer mijn JS-functie aan te roepen die ik in de kop heb toegevoegd.
Hieronder vindt u de code die mijn probleemscenario laat zien.
Opmerking: ik heb geen toegang tot de body in mijn applicatie.
Elke keer als ik op het element klik met id="Save", roept het alleen f1() aan, maar niet fun(). Hoe kan ik het zelfs mijn fun() laten aanroepen?
Help alstublieft.

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

Antwoord 1, autoriteit 100%

U probeert een gebeurtenislistenerfunctie toe te voegen voordat het element wordt geladen. Plaats fun() in een onload gebeurtenislistenerfunctie. Roep f1() aan binnen deze functie, omdat het kenmerk onclick wordt genegeerd.

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


Antwoord 2, autoriteit 39%

U kunt addEventListener gebruiken om zoveel luisteraars toe te voegen als u wilt.

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

Voeg ook de tag script toe na het element om ervoor te zorgen dat het element Save wordt geladen op het moment dat het script wordt uitgevoerd

In plaats van een scripttag te verplaatsen, zou je het kunnen noemen wanneer dom is geladen. Plaats dan uw code in de

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

voorbeeld


Antwoord 3, autoriteit 14%

Ik heb uw document.getElementById("Save").onclick = verwijderd voor uw functies, omdat het een gebeurtenis is die al op uw knop wordt aangeroepen. Ik moest de twee functies ook afzonderlijk aanroepen door de onclick-gebeurtenis.

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

Antwoord 4, autoriteit 9%

Als u het kenmerk onclick gebruikt of een functie toepast op uw JS onclick-eigenschappen, wordt uw onclick-initialisatie in <head>.

Wat u moet doen is klikgebeurtenissen toevoegen aan uw knop. Om dat te doen heb je de addEventListener of attachEvent (IE) methode nodig.

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

Antwoord 5

Inline code heeft een hogere prioriteit dan de andere. Om uw andere functie func () aan te roepen, roept u deze op vanaf de f1 ().

Voeg binnen uw functie een regel toe,

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

Je hele code herschrijven,

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

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes