Home I need to add a class only to the image element only if the src value is empty or file extension is wrong

Questions

I need to add a class only to the image element only if the src value is empty or file extension is wrong

January 6, 2022

 $(document).ready(function() {
                const images = document.querySelectorAll('.header');
                images.forEach(findImageExtension);
                function findImageExtension(images) {
                    var src = images.getElementsByTagName('img')[0].src;
                    var fileExtension = src.split('.').pop();
                    console.log(fileExtension)
                    if (!src || fileExtension != 'jpg' || fileExtension != 'png' || fileExtension != 'svg' || fileExtension != 'jpeg' || fileExtension != 'gif') {
                        $('.image').addClass("invalidImage")
                    }
                }
            })

.image.invalidImage {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
<img loading="lazy" data-object-fit="" class="image" src="/sites/default/files/2021-02/DOVE%C2%AE%20PROMISES%C2%AE%20Silky%20Smooth%20Dark%20Chocolate.jpg" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">
        
<h2 class="heading">
      DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
  </div>
  
<div class="header">
<img loading="lazy" data-object-fit="" class="image" src="/sites/default/files/2021-02/DOVE%C2%AE%20PROMISES%C2%AE%20Silky%20Smooth%20Dark%20Chocolate.jpg" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">
        
<h2 class="heading">
      DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
  </div>

If I try to remove any one src value or try to change the extension of any one file, the class is getting added to both the image element. What is wrong in my code? Please help to solve the issue

>Solution :

I think you want something like this:

if (!src || fileExtension != 'jpg' && fileExtension != 'png' && fileExtension != 'svg' && fileExtension != 'jpeg' && fileExtension != 'gif') {
  $('.image', images).addClass("invalidImage")
}

Now it will show the image, if the extension is empty, or if it’s not jpg,png,svg,jpeg,gif

Demo

$(document).ready(function() {
  const images = document.querySelectorAll('.header');
  images.forEach(findImageExtension);

  function findImageExtension(images) {
    var src = images.getElementsByTagName('img')[0].src;
    var fileExtension = src.split('.').pop();
    console.log(fileExtension)
    if (!src || fileExtension != 'jpg' && fileExtension != 'png' && fileExtension != 'svg' && fileExtension != 'jpeg' && fileExtension != 'gif') {
      $('.image', images).addClass("invalidImage")
    }
  }
})

.image.invalidImage {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  <img loading="lazy" data-object-fit="" class="image" src="/sites/default/files/2021-02/DOVE%C2%AE%20PROMISES%C2%AE%20Silky%20Smooth%20Dark%20Chocolate.jpg" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">

  <h2 class="heading">
    DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
</div>

<div class="header">
  <img loading="lazy" data-object-fit="" class="image" src="/sites/default/files/2021-02/DOVE%C2%AE%20PROMISES%C2%AE%20Silky%20Smooth%20Dark%20Chocolate.bit" alt="DOVE® PROMISES® Silky Smooth Dark Chocolate">

  <h2 class="heading">
    DOVE® PROMISES® Silky Smooth Dark Chocolate
  </h2>
</div>