जावास्क्रिप्ट पर सक्रियण शैलियों का वैकल्पिककरण

पिछले पाठ में हमने सीखा कि उन पर क्लिक करके सेल को कैसे सक्रिय किया जाए। आइए अब ऐसा करें कि रंगों का वैकल्पिककरण हो: पहला सेल लाल रंग में रंगा जाए, दूसरा - हरे रंग में, तीसरा - फिर से लाल रंग में और इसी तरह आगे भी।

इस कार्य को हल करने के लिए हमें अब दो CSS क्लासेस की आवश्यकता होगी:

css.color1 {
  background: red;
}
.color2 {
  background: green;
}

आइए वर्णित वैकल्पिककरण को लागू करें:

javascriptlet tds = document.querySelectorAll('#table td');

let color = 'color1';
for (let td of tds) {
  td.addEventListener('click', function() {
    if (color == 'color1') {
      color = 'color2'
    } else {
      color = 'color1'
    }
    
    this.classList.add(color);
  });
}

सरणी से कई रंगों का वैकल्पिककरण

अब मान लीजिए कि हम दो रंगों का वैकल्पिककरण नहीं करना चाहते, बल्कि एक मनमानी संख्या में करना चाहते हैं। आइए इसके लिए CSS क्लासेस की एक सरणी संग्रहीत करें:

javascriptlet colors = ['color1', 'color2', 'color3'];

आइए हमारी क्लासेस के रंग लिखें:

css.color1 {
  background: red;
}
.color2 {
  background: green;
}
.color3 {
  background: yellow;
}

और अब वैकल्पिककरण को लागू करें:

javascriptlet tds = document.querySelectorAll('#table td');

let i = 0;
let colors = ['color1', 'color2', 'color3'];

for (let td of tds) {
  td.addEventListener('click', function() {
    this.classList.add(colors[i]);
    
    i++;
    if (i == colors.length) {
      i = 0;
    }
  });
}