Display styling if a image id is display block instead of none

Question

I want to use java script instead of j query : Check, using jQuery, if an element is 'display:none' or block on click, but when you switch the display none into a display block using a button. Java

                    var slideIndex = 0;
                    showDivs(slideIndex);

                    function plusDivs(n) {
                      showDivs(slideIndex += n);
                    }

                    function showDivs(n) {//switching function
                      var i;
                      var x = document.getElementsByClassName("mySlides");
                      if (n > x.length) {slideIndex = 1}
                      if (n < 1) {slideIndex = x.length}
                      for (i = 0; i < x.length; i++) {
                        x[i].style.display = "none";  
                      }
                      x[slideIndex-1].style.display = "block";  
                    }
                    if(document.getElementsById("1").style.display = "block")//if style display is block
                    {
                        document.getElementsById("1I").style.width = "78px";
                        document.getElementsById("1I").style.height = "48px";
                        document.getElementsById("1I").style.border = "4px solid green";
                        document.getElementsById("1I").style.boxShadow = "1px 4px 8px lightblue";
                    }

Html

                <div id="View-Post-Image">
                    <img style="display: block;" class="mySlides" src="img-POST/162x162-1.jpg" alt="#"/>
                    <img class="mySlides" id="1" src="img-POST/162x162-2.jpg" alt="#"/>
                    <img class="mySlides" id="2" src="img-POST/192x128-1.jpg" alt="#"/>
                    <img class="mySlides" id="3" src="img-POST/192x128-2.jpg" alt="#"/>
                    <img class="mySlides" id="4" src="img-POST/192x128-4.jpg" alt="#"/>
                    <img class="mySlides" id="5" src="img-POST/192x128-3.jpg" alt="#"/>
                    <img class="mySlides" id="6" src="img-POST/192x128-5.jpg" alt="#"/>
                    <img class="mySlides" id="7" src="img-POST/192x128-6.jpg" alt="#"/>
                    <img class="mySlides" id="8" src="img-POST/192x128-7.jpg" alt="#"/>
                    <img class="mySlides" id="9" src="img-POST/192x128-8.jpg" alt="#"/>
                    <img class="mySlides" id="10" src="img-POST/192x128-9.jpg" alt="#"/>
                    <img class="mySlides" id="11" src="img-POST/162x162-1.jpg" alt="#"/>
                    <button id="View-Post-Image-GoLeft" 
                            type="Button" 
                            class="w3-button w3-black w3-display-left" 
                            onclick="plusDivs(-1)">&#10094;</button>
                    <button id="View-Post-Image-GoRight"
                        type="Button" 
                            class="w3-button w3-black w3-display-right" 
                        onclick="plusDivs(1)">&#10095;</button>
                </div>
                <ul id="View-Post-List">
                    <li><img src="img-POST/162x162-1.jpg" id="1I" alt="#"/></li>
                    <li><img src="img-POST/162x162-2.jpg" id="2I" alt="#"/></li>
                    <li><img src="img-POST/192x128-1.jpg" id="3I" alt="#"/></li>
                    <li><img src="img-POST/192x128-2.jpg" id="4I" alt="#"/></li>
                    <li><img src="img-POST/192x128-3.jpg" id="5I" alt="#"/></li>
                    <li><img src="img-POST/192x128-4.jpg" id="6I" alt="#"/></li>
                    <li><img src="img-POST/192x128-5.jpg" id="7I" alt="#"/></li>
                    <li><img src="img-POST/192x128-6.jpg" id="8I" alt="#"/></li>
                    <li><img src="img-POST/192x128-7.jpg" id="9I" alt="#"/></li>
                    <li><img src="img-POST/192x128-8.jpg" id="0I" alt="#"/></li>
                    <li><img src="img-POST/192x128-9.jpg" id="11I" alt="#"/></li>
                    <li><img src="img-POST/162x162-1.jpg" id="12I" alt="#"/></li>
                </ul>

I done the switching part of this, but when i click the button it dont do any thing but switches Image the two buttons are for switching the image but when i click one of them the arrow button it will show a style at the bottom of the image that is the same image and the image will switch same as the image that is style

score 1 · Answer 1 · answered Jun 27 '20 at 02:16

You are assigning the value of "block" to the display property instead of checking for equality on this line:

if(document.getElementsById("1").style.display = "block")

Try changing the = to ===:

if(document.getElementsById("1").style.display === "block")

score 0 · Answer 2 · answered Jun 27 '20 at 02:35

0

@zeterain, has a typo. I believe it should be:

if(document.getElementById("1").style.display === "block")

answered Jun 27 '20 at 02:35

S. Costello

35
1
10

Gamer Vang · Accepted Answer · 2020-06-29T19:31:59.083

0

I Found out now its just this var id1 = getElementById("1"); if (window.getComputedStyle(id1).display === "block")

edited Jun 29 '20 at 19:31

answered Jun 28 '20 at 02:17

Gamer Vang

32
1
10

Display styling if a image id is display block instead of none

3 Answers3