मान लें कि मेरे पास जेएस फ़ंक्शन को कॉल करने वाली निम्न 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() को कैसे कॉल कर सकता हूं?

अग्रिम में धन्यवाद!

3
Jason 29 फरवरी 2020, 17:40
2
 – 
Andreas
29 फरवरी 2020, 17:41
6
जेएस को इनलाइन न करें। document.querySelectorAll का प्रयोग करें। संग्रह के माध्यम से पुनरावृति। Element.prototype.addEventListener('click') का प्रयोग करें।
 – 
Terry
29 फरवरी 2020, 17:43

4 जवाब

रिसर्च ऐडइवेंट लिस्टनर।

कोड के माध्यम से सभी वांछित तत्वों को एक ही ऑनक्लिक हैंडलर संलग्न करके आप जो चाहते हैं वह करते हैं।

ऑनलाइन उदाहरणों का एक गुच्छा। जैसे एक ही लाइन में कई एलीमेंट में ईवेंट लिस्टर कैसे जोड़ें ए>

0
Hari Lubovac 29 फरवरी 2020, 17:47
1
यह एक टिप्पणी है और जवाब नहीं है।
 – 
Andreas
29 फरवरी 2020, 18:02

नीचे दिए गए कोड का प्रयोग करें:

var elements= document.getElementsByClassName("my-class");
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunc, false);
}
1
Abolfazl 29 फरवरी 2020, 23:13
यह काम नहीं करेगा। आपके पास myFunc() है जब आप जो चाहते हैं वह myFunc है। addEventListener() का दूसरा तर्क 'फ़ंक्शन' प्रकार का होना चाहिए; myFunc() 'फ़ंक्शन' प्रकार का नहीं है; यह जो भी प्रकार है myFunc() द्वारा लौटाया जाता है।
 – 
avocadatoria
29 फरवरी 2020, 23:10

मैंने सीखा कि मैं एक ट्यूटोरियल में क्या साझा करने के लिए आ रहा हूं और यह मेरे लिए काम करता है।

  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()' पद्धति का उपयोग करके किसी विशिष्ट तत्व के लिए कुछ विशिष्ट करने के लिए पहुँच प्राप्त कर सकते हैं।

उम्मीद है ये मदद करेगा।

1
Onaapo 29 फरवरी 2020, 23:29
यह काम नहीं करेगा। जैसा कि यहां एक अन्य उत्तर के साथ है, आपके पास myFunc() है जब आप जो चाहते हैं वह myFunc है। addEventListener() का दूसरा तर्क 'फ़ंक्शन' प्रकार का होना चाहिए; myFunc() 'फ़ंक्शन' प्रकार का नहीं है; यह जो भी प्रकार है myFunc() द्वारा लौटाया जाता है।
 – 
avocadatoria
29 फरवरी 2020, 23:13
हाँ .. यह सच है .. एक टाइपो है। सुधारों के लिए धन्यवाद।
 – 
Onaapo
29 फरवरी 2020, 23:28

आप 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>
1
chuckx 3 मार्च 2020, 07:53