Pertanyaan Cara Memanggil fungsi JS menggunakan acara OnClick


Saya mencoba memanggil fungsi JS saya yang saya tambahkan di header. Temukan kode di bawah ini yang menunjukkan skenario masalah saya. Catatan: Saya tidak memiliki akses ke tubuh di aplikasi saya. Setiap kali saya mengklik elemen dengan id="Save" itu hanya panggilan f1() tapi tidak fun(). Bagaimana saya bisa membuatnya bahkan memanggil saya fun()? Tolong bantu.

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

32
2018-01-31 10:27


asal


Jawaban:


Anda mencoba melampirkan fungsi listener kejadian sebelum elemen dimuat. Tempat fun() di dalam sebuah onload fungsi pendengar acara. Panggilan f1() dalam fungsi ini, seperti onclick atribut akan diabaikan.

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


29
2018-01-31 10:31



Anda bisa menggunakan addEventListener untuk menambahkan pendengar sebanyak yang Anda inginkan.

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

Juga tambahkan script beri tag setelah elemen untuk memastikan Save elemen dimuat pada saat skrip berjalan

Daripada memindahkan tag skrip Anda bisa menyebutnya saat dom dimuat. Maka Anda harus menempatkan kode Anda di dalam

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

contoh


6
2018-01-31 10:38



Saya menghapus Anda document.getElementById("Save").onclick = sebelum fungsi Anda, karena ini adalah acara yang sudah dipanggil di tombol Anda. Saya juga harus memanggil dua fungsi secara terpisah oleh acara 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
2017-07-16 16:20



Menggunakan atribut onclick atau menerapkan fungsi ke properti JS onclick Anda akan menghapus inisialisasi onclick Anda di.

Apa yang perlu Anda lakukan adalah menambahkan klik acara di tombol Anda. Untuk melakukan itu, Anda perlu menambahkan metode AddEventListener dan 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
2018-01-31 10:40



Kode sebaris membutuhkan prioritas lebih tinggi daripada yang lain. Untuk memanggil fungsi lain Anda func () panggil dari f1 ().

Di dalam fungsi Anda, tambahkan satu baris,

function fun () {
// Your code here
}

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

fun ();

    }

Tulis ulang seluruh kode Anda,

 <!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
2018-01-31 10:31



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);
}

-4
2017-09-14 11:20