पहले उपयोग पर दिखाएँ/छिपाएँ बटन के लिए डबल-क्लिक क्यों करें?

एक वेब पेज में, एक बटन दिखाने या छिपाने के लिए होता है एक तत्व, लेकिन इसके आरंभिक आह्वान पर डबल-क्लिक की आवश्यकता होती है। जांच करने पर, बटन का कोड इस प्रकार पाया गया:

function showhidemenu() {
  var x = document.getElementById("menu");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

समस्या आईडी "मेनू" वाले तत्व की प्रारंभिक स्थिति से उत्पन्न होती है। डिफ़ॉल्ट रूप से, तत्व की डिस्प्ले प्रॉपर्टी सीएसएस में "कोई नहीं" पर सेट होती है। जब showhidemenu() फ़ंक्शन को पहली बार कॉल किया जाता है, तो निम्न जांच की जाती है:

if (x.style.display === "none")

यह जांच सत्य का मूल्यांकन करता है क्योंकि तत्व की प्रारंभिक प्रदर्शन संपत्ति "कोई नहीं" है। नतीजतन, तत्व का प्रदर्शन "ब्लॉक" पर सेट है। हालाँकि, अगले क्लिक पर, डिस्प्ले प्रॉपर्टी उम्मीद के मुताबिक "कोई नहीं" पर सेट हो जाती है।

इस समस्या के समाधान के लिए, तत्व की प्रारंभिक डिस्प्ले प्रॉपर्टी को "कोई नहीं" के बजाय "खाली" पर सेट किया जाना चाहिए। ऐसा करने से यह सुनिश्चित हो जाता है कि पहले क्लिक पर फ़ंक्शन में चेक का सही मूल्यांकन किया गया है।

if (x.style.display === "none" || x.style.display === "")

इस संशोधन के साथ, जैसा कि इरादा था, बटन पहले क्लिक पर तत्व दिखाएगा।