मान लें कि मेरे पास जेएस फ़ंक्शन को कॉल करने वाली निम्न HTML लाइनें हैं।
<h3>
<span class="my-class" onclick="myFunc()">one</span>
<span class="my-class" onclick="myFunc()">two</span>
<span class="my-class" onclick="myFunc()">three</span>
<span class="my-class" onclick="myFunc()">four</span>
</h3>
मैं HTML फ़ाइल में इतनी बार onclick="myFunc()" लिखकर स्वयं को दोहराए बिना सीधे स्क्रिप्ट से myFunc() को कैसे कॉल कर सकता हूं?
अग्रिम में धन्यवाद!
4 जवाब
रिसर्च ऐडइवेंट लिस्टनर।
कोड के माध्यम से सभी वांछित तत्वों को एक ही ऑनक्लिक हैंडलर संलग्न करके आप जो चाहते हैं वह करते हैं।
ऑनलाइन उदाहरणों का एक गुच्छा। जैसे एक ही लाइन में कई एलीमेंट में ईवेंट लिस्टर कैसे जोड़ें ए>
नीचे दिए गए कोड का प्रयोग करें:
var elements= document.getElementsByClassName("my-class");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunc, false);
}
myFunc() है जब आप जो चाहते हैं वह myFunc है। addEventListener() का दूसरा तर्क 'फ़ंक्शन' प्रकार का होना चाहिए; myFunc() 'फ़ंक्शन' प्रकार का नहीं है; यह जो भी प्रकार है myFunc() द्वारा लौटाया जाता है।
मैंने सीखा कि मैं एक ट्यूटोरियल में क्या साझा करने के लिए आ रहा हूं और यह मेरे लिए काम करता है।
function myFunc()
{
console.log('Body of myFunc');
}
var span_list = document.getElementsByClassName('my-class');
for(this_span = 0; this_span < span_list.length; this_span++)
{
span_list[this_span].addEventListener('click', myFunc);
}
इस पद्धति के साथ, आप अपनी कक्षा में से किसी एक पर 'getAttribute()' पद्धति का उपयोग करके किसी विशिष्ट तत्व के लिए कुछ विशिष्ट करने के लिए पहुँच प्राप्त कर सकते हैं।
उम्मीद है ये मदद करेगा।
myFunc() है जब आप जो चाहते हैं वह myFunc है। addEventListener() का दूसरा तर्क 'फ़ंक्शन' प्रकार का होना चाहिए; myFunc() 'फ़ंक्शन' प्रकार का नहीं है; यह जो भी प्रकार है myFunc() द्वारा लौटाया जाता है।
आप Document.querySelectorAll().
इसके अलावा, आप मूल तत्व को एक बार कक्षा निर्दिष्ट करके अपने मार्कअप में पुनरावृत्ति को भी कम कर सकते हैं। इस मामले में, यह <h3> तत्व होगा। फिर आप अपने क्वेरी चयनकर्ता को तदनुसार संशोधित करते हैं।
यहां एक उदाहरण दिया गया है जहां मैंने प्रत्येक <span> तत्व को एक id निर्दिष्ट किया है ताकि यह पता लगाया जा सके कि किस तत्व पर क्लिक किया गया था:
function myFunc() {
console.log(`myFunc() called for ${this.id}`);
}
for (const e of document.querySelectorAll('h3.my-class > span')) {
e.addEventListener('click', myFunc, false);
}<h3 class="my-class">
<span id="one">one</span>
<span id="two">two</span>
<span id="three">three</span>
<span id="four">four</span>
</h3>
document.querySelectorAllका प्रयोग करें। संग्रह के माध्यम से पुनरावृति।Element.prototype.addEventListener('click')का प्रयोग करें।