I wanted to make an image disappear with JavaScript but it's still the same why?-CodePudding

I have a code that passes from image to image with javascript but I wanted when the data-slide-to was equal to 1 the image would disappear, but instead the image remains the same as if nothing happened, why isn't it working?

<section >
            <div >
               <img id="myImage" src="{{url ('assets/images/slider-bg.jpg')}}" alt="">
            </div>

            <script> 
               if($("li").attr("data-slide-to") == "1")
               {
                  document.getElementById("myImage").style.display = "none";
               }
            </script>

            <div >
                  <ol >
                     <li data-target="#customCarousel1" data-slide-to="0" ></li>
                     <li data-target="#customCarousel1" data-slide-to="1" ></li>
                     <li data-target="#customCarousel1" data-slide-to="2"></li>
                  </ol>
            </div>
 </section>

CodePudding user response：

After reviewing the bootstrap4 documentation, it looks like you have some structure issues with your code. I would recommend reviewing the documentation first so that the format is correct before trying to use JavaScript to add functionality. Below is an example that is pertinent to your question.

Secondly, you should keep JavaScript and CSS in their own files.

Note: Example pulled from www.w3schools.com.

.carousel-inner img {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div id="demo"  data-ride="carousel">

  <!-- Indicators -->
  <ul >
    <li data-target="#demo" data-slide-to="0" ></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div >
    <div >
      <img src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="Los Angeles" width="1100" height="500">
    </div>
    <div >
      <img src="https://www.w3schools.com/bootstrap4/chicago.jpg" alt="Chicago" width="1100" height="500">
    </div>
    <div >
      <img src="https://www.w3schools.com/bootstrap4/la.jpg" alt="New York" width="1100" height="500">
    </div>
  </div>

  <!-- Left and right controls -->
  <a  href="#demo" data-slide="prev">
    <span ></span>
  </a>
  <a  href="#demo" data-slide="next">
    <span ></span>
  </a>
</div>