KPC
Kevin Powell - Community•2y ago
Sebastian

Class toggle when div ID == var

Hey front-enders! I’ve been building a carousel with some snippets of JS and CSS, where 'var curSlide' returns the index of the current slide. My next goal is to reveal different text elements inside of a div that is adjacent to the slider (so that they don’t follow the movement of the carousel. Now I want to show/hide the text element, have assigned them with IDs that are identical to each slide index, and want to run an if-statement to send the correct css class to corresponding IDs. I’ve kind of "sketched" it in my head, but my JS knowledge is more or less non-existent, so obviously it doesn’t work 🤣 Any pointers on how to do this is much appreciated! if (document.getElementById(" ") == curSlide) { e.target.classList.add("text__show"); } else { e.target.classlist.add("text__hidden"); }
4 Replies
13eck
13eck•2y ago
Instead of a truck-load of if and else if statements, let me introduce you to the switch statement! It evaluates an expression and executes the code that matches the eval: 
const curSlide = {some number};

switch(curSlide) {
  case 1:
    // this code is executed if curSlide === 1
    break;
  case 2:
    // this code is executed if curSlide === 2
    break;
  case 3:
    // this code is executed if curSlide === 3
    break;
  case 4:
    // this code is executed if curSlide === 4
    break;
  default:
    // this code is run if nothing else matches
}
const curSlide = {some number};

switch(curSlide) {
  case 1:
    // this code is executed if curSlide === 1
    break;
  case 2:
    // this code is executed if curSlide === 2
    break;
  case 3:
    // this code is executed if curSlide === 3
    break;
  case 4:
    // this code is executed if curSlide === 4
    break;
  default:
    // this code is run if nothing else matches
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch
Sebastian
SebastianOP•2y ago
This works amazingly. Thank you! A short follow-up though, as some carousels will have 'x' amount of slides and others 'y' amount, and it feels superfluous to have to write out all potential scenarios. Currently I have the following running when clicking next-button and a reversed order on previous. 
  switch(curSlide) {
    case 0:
      document.getElementById('txt1').classList.add('text_show');
      document.getElementById('txt1').classList.remove('text_hidden');
      document.getElementById('txt4').classList.remove('text_show');
      document.getElementById('txt4').classList.add('text_hidden');
      break;
  
    case 1:
      document.getElementById('txt2').classList.add('text_show');
      document.getElementById('txt2').classList.remove('text_hidden');
      document.getElementById('txt1').classList.remove('text_show');
      document.getElementById('txt1').classList.add('text_hidden');
      break;
      
    case 2:
      document.getElementById('txt3').classList.add('text_show');
      document.getElementById('txt3').classList.remove('text_hidden');
      document.getElementById('txt2').classList.remove('text_show');
      document.getElementById('txt2').classList.add('text_hidden');
      break;
  
    case 3:
      document.getElementById('txt4').classList.add('text_show');
      document.getElementById('txt4').classList.remove('text_hidden');
      document.getElementById('txt3').classList.remove('text_show');
      document.getElementById('txt3').classList.add('text_hidden');
      break;
    
    default:
    }
  switch(curSlide) {
    case 0:
      document.getElementById('txt1').classList.add('text_show');
      document.getElementById('txt1').classList.remove('text_hidden');
      document.getElementById('txt4').classList.remove('text_show');
      document.getElementById('txt4').classList.add('text_hidden');
      break;
  
    case 1:
      document.getElementById('txt2').classList.add('text_show');
      document.getElementById('txt2').classList.remove('text_hidden');
      document.getElementById('txt1').classList.remove('text_show');
      document.getElementById('txt1').classList.add('text_hidden');
      break;
      
    case 2:
      document.getElementById('txt3').classList.add('text_show');
      document.getElementById('txt3').classList.remove('text_hidden');
      document.getElementById('txt2').classList.remove('text_show');
      document.getElementById('txt2').classList.add('text_hidden');
      break;
  
    case 3:
      document.getElementById('txt4').classList.add('text_show');
      document.getElementById('txt4').classList.remove('text_hidden');
      document.getElementById('txt3').classList.remove('text_show');
      document.getElementById('txt3').classList.add('text_hidden');
      break;
    
    default:
    }
I don’t know if it is allowed in JS, but in my head I’m thinking: Can this be simplified by injecting the var into the ID? 
document.getElementsByID('txt[curSlide]).classList.add('text_show');
document.getElementsByID('txt[curSlide]).classList.remove('text_hidden');
document.getElementsByID('txt[curSlide + 1]).classList.remove('text_show');
document.getElementsByID('txt[curSlide + 1]).classList.add('text_hidden);
document.getElementsByID('txt[curSlide]).classList.add('text_show');
document.getElementsByID('txt[curSlide]).classList.remove('text_hidden');
document.getElementsByID('txt[curSlide + 1]).classList.remove('text_show');
document.getElementsByID('txt[curSlide + 1]).classList.add('text_hidden);
Armands Uiska
Armands Uiska•2y ago
can you show html? that logic in switch statement is strange
Sebastian
SebastianOP•2y ago
Too long to paste it here, but slapped it up here: https://codepen.io/sebreed/pen/yLReWNo Transitions are breaking because they link to my base.css, but otherwise the functionality is working.

Did you find this page helpful?