Sebastian Comments - Answer Overflow

Sebastian

•Created by Sebastian on 4/13/2023 in #front-end

Class toggle when div ID == var

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.~~

5 replies

KPCKevin Powell - Community

•Created by Sebastian on 4/13/2023 in #front-end

Class toggle when div ID == var

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);

5 replies

Gaming

Programming