Menambahkan Penangan dalam Loop di JavaScript

Sekarang mari kita belajar untuk menambahkan penangan peristiwa ke elemen secara massal. Misalnya, kita memiliki beberapa paragraf:

<p>teks1</p>
<p>teks2</p>
<p>teks3</p>

Misalkan kita juga memiliki sebuah fungsi:

function func() {
	console.log('!');
}

Mari kita ulas paragraf-paragraf kita dalam sebuah loop dan untuk setiap paragraf tambahkan fungsi func sebagai penangan klik:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

Mari kita lanjutkan lebih jauh dan buat agar saat mengklik paragraf mana pun, teks dari paragraf tersebut ditampilkan. Namun, ada masalahnya: paragrafnya banyak, tetapi fungsi penangan hanya satu. Bagaimana cara membedakan paragraf-paragraf kita di dalam fungsi penangan?

Objek this akan membantu kita dalam hal ini - saat fungsi dipanggil pada saat peristiwa terjadi, objek ini akan menunjuk ke elemen tempat peristiwa itu terjadi. Mari ubah kode fungsi func kita sesuai dengan yang telah dikatakan:

function func() {
	console.log(this.textContent); // menampilkan teks paragraf
}

Diberikan fungsi berikut:

function func() {
	this.value = Number(this.value) + 1;
}

Diberikan juga beberapa input. Buatlah agar saat kehilangan fokus pada salah satu input kami, fungsi di atas dijalankan.

Diberikan paragraf dengan angka. Buatlah agar saat mengklik paragraf mana pun, angka di dalamnya dikuadratkan.