0

I'm making a modal the background image of which should change every time the user clicks to the next image. The background image is just a gradient. To be able to make the background image transparent without affecting the foreground, I had to create a pseudoclass, which works. However hard I try, I cannot get the background image in the pseudoclass to change as the user clicks. I cannot figure out what I am doing wrong, but I suspect the problem is in this part of the javascript:

if(slides[slideIndex] === 1){
        
  document.getElementsByClassName("modalE:before").src.style.backgroundImage = "linear-gradient(160deg, #ff2652, #008ce3)";
}

I could use some help making the background image change as the user clicks through images.

function showSlides(n) {
  
  var slides = document.getElementsByClassName("mySlidesE");
 var i = 0;
  
  
  if (n > slides.length) {slideIndex = 1
                         }
  if (n < 1) {slideIndex = slides.length}
  
  for (i = 0; i < slides.length; i++) 
  {
    slides[i].style.display = "none";
    
    
  }
  
  
  slides[slideIndex-1].style.display = "block";
  
  
  
  if(slides[slideIndex] === 1){
        document.getElementsByClassName("modalE:before").src.style.backgroundImage = "linear-gradient(160deg, #ff2652, #008ce3)"; 
      
    }

  
}
.modalE {
  display: none;
  position: fixed;
  z-index: 1;
}

.modalE:before {
  content: ' ';
  display: block;
  background-image: linear-gradient(160deg, #ff2652, #008ce3);
  opacity: .6;
  
}


.mySlidesE {
  
  position: relative;
  display: none;
}
<div id="EricModal" class="modalE modalE:before">
  <span class="closeE" onclick="closeModalE()">&times;</span>
  
  
  <div class="modal-contentE">
    
    <div class="mySlidesE">
      
      <img src="" style="width:100%">
    </div>

    <div class="mySlidesE">
      <img src="" style="width:100%">
    </div>
    
     <div class="mySlidesE">
      <img src="" style="width:100%">
    </div>

     <div class="mySlidesE">
      <img src="" style="width:100%">
    </div>

     <div class="mySlidesE">
      <img src="" style="width:100%">
    </div>


    
    <!-- Next/previous controls -->
    <a class="prevE" onclick="plusSlides(-1)">&#10094;</a>
    <a class="nextE" onclick="plusSlides(1)">&#10095;</a>
Reality
  • 637
  • 1
  • 6
  • 25
mac_raptor
  • 25
  • 5
  • I think you're right about your suspected code. Use `querySelector` for selecting elements with `:before` Also, I think it's `::before` and not `:before` (it doesn't matter *too much*, but `::before` is [CSS3 syntax](https://stackoverflow.com/a/7327341/14409978)) – Reality Apr 14 '21 at 17:07
  • 1
    Simplify it and just toggle a class – epascarello Apr 14 '21 at 17:14
  • Thank you for the advice. I'm struggling with this one and any suggestions really help. – mac_raptor Apr 14 '21 at 18:58
  • Does your background image have just two possible values or is there a different value for each slide or.... – A Haworth Apr 14 '21 at 20:56
  • There will be a different value for each slide (5). Right now, I just have one in there because I figure if I can get one to work, I can then add others. – mac_raptor Apr 14 '21 at 21:22
  • Actually, with the comment I made earlier I realize that you can't get pseudo-elements like `:before` with querySelector, either. Read [this](https://stackoverflow.com/questions/38872290/how-to-get-pseudo-element) for a possible workaround. – Reality Apr 14 '21 at 22:43
  • I appreciate it. I'm thinking this one might be a bit beyond my skill level and I should just let it go. – mac_raptor Apr 14 '21 at 22:56

0 Answers0