Html memanggil fungsi javascript saat dimuat

Terkadang Anda perlu memanggil fungsi javascript setelah memuat div, atau kami perlu menjalankan fungsi setelah memuat div. Dalam posting ini, saya akan memberi Anda teknik untuk memecahkan cara memanggil fungsi javascript setelah memuat div

Gagasan Utama Untuk Memanggil Fungsi Js Setelah Memuat Div

Misalkan Anda memiliki div bernama my_area(id), sekarang Anda ingin memanggil fungsi javascript setelah div my_area dimuat sepenuhnya
Sekarang pikirkan secara logis jika div(my_area) Anda dimuat maka harus memiliki lebar dan jika tidak dimuat maka tidak memiliki lebar
Jadi periksa lebar div Anda dan jika Anda menemukan div itu memiliki div maka panggil fungsi Anda
Juga, Anda perlu memeriksa lebarnya sampai lebar dana Anda lebih besar dari nol karena Anda tidak tahu kapan itu akan dimuat dan jika Anda menemukannya berarti lebar div Anda lebih besar dari nol maka berhentilah memeriksa dan panggil fungsi Anda

Kode HTML "panggil fungsi javascript setelah memuat div"

<div id="my_area">
	call a javascript function after load this div
	ID of this div is my_area
</div> 

"Panggil Fungsi Javascript Setelah Memuat Div" JavaScript Mentah

var checkDiv = setInterval(function(){

var my_div_width = $("#my_area").width(); // find width

if( my_div_width > 0) { 
	clearInterval(checkDiv);
	 	aTestFunction();
	}
}, 10); // check after 10ms every time

function aTestFunction(){
	return "called";
}

"Panggil Fungsi Javascript Setelah Memuat Div" Contoh Jquery

document.querySelector('#my_area').addEventListener('load', function(){
  aTestFunction();
});

function aTestFunction(){
	return "called";
}

Fungsi yang dapat dipanggil setiap kali halaman web dimuat. Konvensi ini bergantung pada objek browser window dan propertinya onload. Cara dasar untuk mengetahui bahwa fungsi Anda dipanggil adalah dengan memeriksa panel konsol

Sebagai contoh demonstratif, kami akan mempertimbangkan struktur HTML, di mana kami ingin memvisualisasikan bagaimana keluaran kami nantinya. Dan setiap kali kami memuat ulang halaman web, panel konsol akan merespons pernyataan tertentu yang diarahkan oleh properti window.onload

Fungsi JavaScript Yang Mengambil Variabel sebagai Parameter

Di sini, kita akan menggunakan fungsi yang menggunakan variabel sebagai argumen. Bersamaan dengan itu, drive pengkodean yang bereksperimen di jsbin adalah untuk mendapatkan pemahaman yang lebih baik. Anda dapat, dengan cara apa pun, menggunakan browser dan editor yang lebih disukai

Cuplikan Kode

  
  
  Test
 


  


  

Keluaran

Dalam contoh ini, bagian skrip ditambahkan di dalam badan HTML, dan seperti yang Anda lihat, di setiap pemuatan laman web, konsol memiliki nilai, yang menjelaskan bahwa keseluruhan kode berfungsi

Selain itu, kasus penggunaan dasar untuk ________53______ adalah untuk memastikan bahwa halaman berhasil dimuat setiap kali. Kemungkinan besar berfungsi sebagai parameter untuk memastikan blok kode bebas kesalahan dalam HTML Anda. Jadi, Anda bisa menggunakannya di mana saja sesuai dengan kenyamanan Anda

Fungsi Panggilan JavaScript Yang Mengambil Fungsi sebagai Argumen saat Dimuat

Contoh berikut akan menjelaskan fungsi properti window.onload secara berbeda. Kami akan menggunakan bagian kode HTML dan bagian kode JavaScript individual. Parameter fungsi kita adalah beberapa fungsi lainnya

Cuplikan Kode

  
  
  Test
  


  

  

function f1(){
  return "4";
}

function f2(){
  return "2";
}
  
function func(f1,f2){
  return f1()+f2();
}

window.onload = function(){
 console.log(func(f1,f2)); 
}

document.getElementById('output').innerHTML = func(f1,f2);

Keluaran

Dari skenario keluaran, setiap kali Run with JS ditekan, ini memberikan pengalaman serupa saat memuat halaman web. Kode tidak memiliki kesalahan, dan itu adalah pernyataan yang dapat disimpulkan yang dapat kita peroleh dari memanggil fungsi pada setiap pemuatan halaman

Anda dapat memanggil dan menjalankan fungsi JavaScript dari HTML dengan beberapa cara

Tutorial ini akan membantu Anda mempelajari tiga metode yang disebutkan di atas

Memanggil fungsi JavaScript pada pemuatan halaman HTML

Anda dapat memanggil dan menjalankan fungsi JavaScript segera setelah laman HTML Anda dimuat dengan mendengarkan peristiwa

window.addEventListener('load', event => {
  test();
});

Pertama, Anda perlu membuat fungsi yang ingin Anda jalankan dari halaman HTML Anda. Mari buat fungsi

window.addEventListener('load', event => {
  test();
});

window.addEventListener('load', event => {
  test();
});

<body>
  <h1>Call JavaScript function from HTML</h1>
  <script>
    function test() {
      alert("The function 'test' is executed");
    }
  </script>
</body>

Kemudian, Anda perlu menambahkan kode JavaScript yang akan mendengarkan peristiwa

window.addEventListener('load', event => {
  test();
});

window.addEventListener('load', event => {
  test();
});

Setelah peristiwa

window.addEventListener('load', event => {
  test();
});

window.addEventListener('load', event => {
  test();
});

window.addEventListener('load', event => {
  test();
});

Sebagai alternatif, Anda dapat menggunakan event handler

window.addEventListener('load', event => {
  test();
});

window.onload = event => {
  test();
};

Tambahkan kode di atas tepat di bawah definisi fungsi

window.addEventListener('load', event => {
  test();
});

<body>
  <h1>Call JavaScript function from HTML</h1>
  <script>
    function test() {
      alert("The function 'test' is executed");
    }
    window.addEventListener('load', event => {
      test();
    });
  </script>
</body>

Setelah halaman HTML Anda selesai dimuat, peristiwa

window.addEventListener('load', event => {
  test();
});

window.addEventListener('load', event => {
  test();
});

Selanjutnya, mari kita lihat bagaimana Anda dapat memanggil fungsi JavaScript ketika sebuah tombol telah diklik

Panggil fungsi JavaScript dari acara klik tombol HTML

Untuk memanggil fungsi JavaScript dari klik tombol, Anda perlu menambahkan event handler dan mendengarkan event

window.onload = event => {
  test();
};

window.onload = event => {
  test();
};

Anda dapat

window.onload = event => {
  test();
};

window.onload = event => {
  test();
};

window.onload = event => {
  test();
};

Misalnya, Anda memiliki dokumen HTML berikut

<body>
  <button id="btn">Click me</button>
</body>

Anda dapat mengambil elemen menggunakan metode

window.onload = event => {
  test();
};

window.onload = event => {
  test();
};

let btn = document.getElementById("btn");
btn.addEventListener('click', event => {
  test();
});

Kode lengkapnya adalah sebagai berikut

<body>
  <button id="btn">Click me</button>
  <script>
    function test() {
      alert("The function 'test' is executed");
    }
    let btn = document.getElementById("btn");
    btn.addEventListener('click', event => {
      test();
    });
  </script>
</body>

Sekarang setelah Anda mengklik tombol, fungsi

window.addEventListener('load', event => {
  test();
});

Sebagai alternatif, Anda juga dapat menambahkan atribut

window.onload = event => {
  test();
};

window.onload = event => {
  test();
};

<body>
  <button onclick="test()">Click me</button>
  <script>
    function test() {
      alert("The function 'test' is executed");
    }
  </script>
</body>

Dengan menambahkan atribut

window.onload = event => {
  test();
};

window.onload = event => {
  test();
};

Panggil fungsi JavaScript dari acara kirim formulir HTML

Untuk memanggil dan menjalankan fungsi JavaScript dari acara HTML

<body>
  <h1>Call JavaScript function from HTML</h1>
  <script>
    function test() {
      alert("The function 'test' is executed");
    }
    window.addEventListener('load', event => {
      test();
    });
  </script>
</body>

<body>
  <h1>Call JavaScript function from HTML</h1>
  <script>
    function test() {
      alert("The function 'test' is executed");
    }
    window.addEventListener('load', event => {
      test();
    });
  </script>
</body>

Lihatlah contoh berikut

<body>
  <form onsubmit="test()">
    <label for="username">Enter username:</label> 
    <input type="text" name="username" id="username" />
    <input type="submit" />
  </form>
  <script>
    function test() {
      alert(`The function 'test' is executed`);
    }
  </script>
</body>

Dengan menetapkan fungsi

window.addEventListener('load', event => {
  test();
});

<body>
  <h1>Call JavaScript function from HTML</h1>
  <script>
    function test() {
      alert("The function 'test' is executed");
    }
    window.addEventListener('load', event => {
      test();
    });
  </script>
</body>

window.addEventListener('load', event => {
  test();
});

Kesimpulan

Metode di atas adalah tiga metode paling umum yang dapat Anda gunakan untuk memanggil fungsi JavaScript dari HTML

Karena atribut

window.onload = event => {
  test();
};

Misalnya, inilah cara Anda memanggil metode

window.addEventListener('load', event => {
  test();
});

<body>
  <button id="btn">Click me</button>
</body>

<body>
  <button id="btn">Click me</button>
</body>

<body>
  <h1 onclick="test()">Heading Block</h1>
  <div onclick="test()">This is a div block</div>
  <p onclick="test()">This is a p block</p>
  <script>
    function test() {
      alert("The function 'test' is executed");
    }
  </script>
</body>

Atribut

window.onload = event => {
  test();
};

window.addEventListener('load', event => {
  test();
});

Bagaimana cara memanggil fungsi JavaScript yang memuat HTML?

Bagaimana cara memanggil fungsi JavaScript saat memuat halaman?

Bagaimana cara memanggil fungsi JavaScript secara otomatis dalam HTML?

Bagaimana cara menjalankan fungsi JavaScript sebelum memuat halaman?