जावास्क्रिप्ट में लूप में हैंडलर जोड़ना

आइए अब सीखते हैं कि कैसे तत्वों को बड़े पैमाने पर इवेंट हैंडलर जोड़ें। उदाहरण के लिए, मान लीजिए कि हमारे पास पैराग्राफ हैं:

<p>text1</p>
<p>text2</p>
<p>text3</p>

मान लीजिए कि हमारे पास एक फ़ंक्शन भी है:

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

आइए हम अपने पैराग्राफ को लूप में पुनरावृत्त करें और प्रत्येक पैराग्राफ को क्लिक हैंडलर के रूप में फ़ंक्शन func जोड़ें:

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

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

आइए आगे बढ़ते हैं और ऐसा करते हैं कि किसी भी पैराग्राफ पर क्लिक करने पर उस पैराग्राफ का टेक्स्ट प्रदर्शित हो। हालाँकि, एक समस्या है: पैराग्राफ कई हैं, लेकिन फ़ंक्शन-हैंडलर एक है। फ़ंक्शन-हैंडलर के अंदर हम अपने पैराग्राफ को कैसे अलग करें?

इसमें ऑब्जेक्ट this हमारी मदद करेगा - इवेंट के समय फ़ंक्शन को कॉल करने पर यह ऑब्जेक्ट उस तत्व की ओर इशारा करेगा, जहाँ यह इवेंट हुआ था। आइए func के हमारे कोड को कही गई बातों के अनुसार बदलें:

function func() {
	console.log(this.textContent); // पैराग्राफ का टेक्स्ट प्रदर्शित करते हैं
}

निम्नलिखित फ़ंक्शन दिया गया है:

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

इनपुट भी दिए गए हैं। ऐसा करें कि हमारे किसी भी इनपुट में फोकस खोने पर ऊपर दिया गया फ़ंक्शन निष्पादित हो।

संख्या वाले पैराग्राफ दिए गए हैं। ऐसा करें कि किसी भी पैराग्राफ पर क्लिक करने पर उसकी संख्या का वर्ग हो जाए।