JavaScript से HTML एट्रिब्यूट बनाना और जोड़ना सीखें।
मान लें आपकी वेबसाइट पर एक बटन है जो आपके क्लिक करने पर एक फ़ंक्शन एक्जीक्यूट करने वाला है। दुर्भाग्य से, किसी ने बटन पर ID या क्लास वैल्यू जोड़ना भूल गया, और अभी आपके पास HTML मार्कअप तक सीधी पहुंच नहीं है।
सौभाग्य से, आप JavaScript का उपयोग करके एक एट्रिब्यूट बना सकते हैं और इसे अपने बटन एलिमेंट से जोड़ सकते हैं।
हमें 3 चीजें करने की आवश्यकता है:
idप्रकार का एक एट्रिब्यूट बनाएं- इसे एक वैल्यू (नाम) दें
- नए एट्रिब्यूट+वैल्यू को बटन एलिमेंट में जोड़ें
HTML मार्कअप
पहला, HTML बटन, जिसमें दुर्भाग्य से अभी तक कोई ID एट्रिब्यूट नहीं है (बूहू):
<button>मुझे क्लिक करें!</button>JavaScript
querySelector() का उपयोग करके अपने बटन को सेलेक्ट करें:
const button = document.querySelector('button')नोट:
यदि आपकी वेबसाइट पर एक से अधिक बटन हैं, तो आप इसे चेन करके हमेशा सेलेक्टर निर्दिष्ट कर सकते हैं। उदाहरण के लिए, यदि आपका प्रश्न वाला बटन एक यूनिक id या क्लास एट्रिब्यूट वाले div एलिमेंट के अंदर है, जैसे:
const button = document.querySelector('.service-section button')एंडनोट।
ठीक है, अब id प्रकार का एक एट्रिब्यूट बनाते हैं:
const attribute = document.createAttribute('id')और इसे एक वैल्यू (नाम) दें:
attribute.value = `js-button-run-function`अब अपने नए बने एट्रिब्यूट को अपने बटन एलिमेंट से जोड़ें:
button.setAttributeNode(attribute)बस इतना ही!
अब यदि आप अपने बटन वेरिएबल को अपने कंसोल पर प्रिंट करते हैं तो आप देख सकते हैं कि आपके बटन को अपग्रेड किया गया है:
console.log(button) // आउटपुट: "<button id='js-button-run-function'>मुझे क्लिक करें</button>"बढ़िया, अब आप इस बटन को उसके यूनिक ID के आधार पर JavaScript से सेलेक्ट कर सकते हैं, और एक फ़ंक्शन बना सकते हैं जो यूजर्स के बटन पर क्लिक करने पर चलेगा।
अच्छे उपाय के लिए, आइए पुष्टि करें कि यह काम करता है। अपने JavaScript फ़ाइल में यह कोड जोड़ें:
// इसके नए id वैल्यू के माध्यम से बटन सेलेक्ट करें const buttonRunFunction = document.querySelector('#js-button-run-function') // क्लिक पर अलर्ट बॉक्स दिखाएं buttonRunFunction.addEventListener('click', function() { alert('यह काम करता है!') })यदि आपने सब कुछ सही किया, तो आपको अब बटन पर क्लिक करने पर यह काम करता है! कहता हुआ एक अलर्ट बॉक्स पॉप अप दिखाई देना चाहिए।
सभी कोड:
const button = document.querySelector('button') const attribute = document.createAttribute('id') attribute.value = `js-button-run-function` // नए एट्रिब्यूट को बटन से जोड़ें button.setAttributeNode(attribute) // इसके id के माध्यम से बटन सेलेक्ट करें const buttonRunFunction = document.querySelector('#js-button-run-function') // बटन पर क्लिक इवेंट जोड़ें buttonRunFunction.addEventListener('click', function() { alert('यह काम करता है!') })
