जावास्क्रिप्ट के साथ HTML विशेषता बनाने और जोड़ने का तरीका जानें।
मान लें कि आपकी वेबसाइट पर एक बटन है, जिस पर क्लिक करने पर किसी फ़ंक्शन को निष्पादित करना होता है। दुर्भाग्य से, कोई व्यक्ति बटन में एक आईडी या वर्ग मान जोड़ना भूल गया है, और अभी आपके पास HTML मार्कअप तक सीधी पहुंच नहीं है।
सौभाग्य से, आप जावास्क्रिप्ट का उपयोग करके केवल एक विशेषता बना सकते हैं और इसे अपने बटन तत्व से जोड़ सकते हैं।
हमें 3 काम करने होंगे:
idप्रकार की विशेषता बनाएं- इसे एक मान दें (नाम)
- बटन तत्व में नई विशेषता+मान जोड़ें
HTML मार्कअप
सबसे पहले, HTML बटन, जिसमें दुख की बात है कि कोई आईडी विशेषता (buhu) नहीं है, फिर भी:
<button>Click me!</button>JavaScript
querySelector() . का उपयोग करके अपना बटन चुनें :
const button = document.querySelector('button')नोट:
यदि आपकी वेबसाइट में एक से अधिक बटन हैं, तो आप चयनकर्ता को हमेशा श्रृंखलाबद्ध करके निर्दिष्ट कर सकते हैं। उदाहरण के लिए, यदि आपका विचाराधीन बटन एक अद्वितीय आईडी या वर्ग विशेषता वाले 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)
// output: "<button id='js-button-run-function'>Click me</button>"बढ़िया, अब आप इस बटन को उसकी विशिष्ट आईडी के आधार पर चुनने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं, और एक ऐसा फ़ंक्शन बना सकते हैं जो उपयोगकर्ता द्वारा बटन पर क्लिक करने पर चलेगा।
अच्छे उपाय के लिए, आइए पुष्टि करें कि यह काम करता है। इस कोड को अपनी जावास्क्रिप्ट फ़ाइल में जोड़ें:
// Select button via its new id value
const buttonRunFunction = document.querySelector('#js-button-run-function')
// On click show an alert box
buttonRunFunction.addEventListener('click', function() {
alert('It works!')
})अगर आपने सब कुछ सही ढंग से किया है, तो अब आपको “यह काम करता है!” . कहते हुए एक अलर्ट बॉक्स दिखना चाहिए जब आप बटन पर क्लिक करते हैं तो पॉप अप होता है।
सभी कोड:
const button = document.querySelector('button')
const attribute = document.createAttribute('id')
attribute.value = `js-button-run-function`
// Attach new attribute to the button
button.setAttributeNode(attribute)
// Select button via its id
const buttonRunFunction = document.querySelector('#js-button-run-function')
// Add click event to the button
buttonRunFunction.addEventListener('click', function() {
alert('it works!')
})