HTML में तत्व पर क्लिक होने पर स्क्रिप्ट कैसे निष्पादित करें?

onclick इवेंट एट्रिब्यूट

onclick एट्रिब्यूट HTML में किसी तत्व पर क्लिक होने पर JavaScript कोड निष्पादित करने के लिए उपयोग किया जाता है। यह सबसे सामान्य माउस इवेंट है और लगभग सभी HTML तत्वों पर काम करता है।

उदाहरण

निम्नलिखित कोड onclick एट्रिब्यूट का उपयोग दिखाता है:

<!DOCTYPE html>
<html>
<body>
    <h2>onclick इवेंट उदाहरण</h2>
    <button onclick="display()">क्लिक करें</button>
    <p id="demo"></p>
    
    <script>
        function display() {
            document.getElementById("demo").innerHTML = "आपने बटन पर क्लिक किया!";
            document.getElementById("demo").style.color = "green";
        }
    </script>
</body>
</html>

व्यावहारिक उदाहरण

1. टॉगल दृश्यता

<button onclick="toggleVisibility('content')">दिखाएँ/छिपाएँ</button>
<div id="content" style="display:none;">यह सामग्री टॉगल होती है</div>

<script>
function toggleVisibility(id) {
    var el = document.getElementById(id);
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
}
</script>

2. फॉर्म सत्यापन

<form onsubmit="return validateForm()">
    <input type="text" id="name" placeholder="नाम दर्ज करें">
    <button type="submit">सबमिट</button>
</form>

<script>
function validateForm() {
    var name = document.getElementById('name').value.trim();
    if (!name) {
        alert('कृपया नाम दर्ज करें');
        return false; // सबमिशन रोकें
    }
    return true;
}
</script>

3. इवेंट ऑब्जेक्ट तक पहुँच

<button onclick="showEventInfo(event)">इवेंट जानकारी दिखाएँ</button>

<script>
function showEventInfo(event) {
    console.log('क्लिक प्रकार:', event.type);
    console.log('लक्ष्य तत्व:', event.target);
    console.log('निर्देशांक:', event.clientX, event.clientY);
}
</script>

आधुनिक दृष्टिकोण: addEventListener

इंलाइन onclick के बजाय, addEventListener उपयोग करना बेहतर माना जाता है:

<button id="myBtn">क्लिक करें</button>

<script>
document.getElementById('myBtn').addEventListener('click', function(e) {
    console.log('बटन क्लिक किया गया', e);
});
</script>

लाभ

• HTML और JavaScript का पृथक्करण
• एक ही तत्व पर एकाधिक हैंडलर्स जोड़ सकते हैं
• बेहतर स्कोप नियंत्रण
• आसान निष्कासन (removeEventListener)