Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

112
Visualizações
Block disappears if there is no image in it

All health and happiness! A written script that should iterate through all the pictures, if the pictures did not load, then the script should hide the parent block under the .Parent_block class, that is, I have 3 blocks, there is a picture in the central block, but not in the other two, which means they should have property display:none

But I did something wrong. Where did I make a mistake?

let parent_block = document.querySelectorAll('.Parent_block');
let image_b = document.querySelectorAll('.Child_Img');

image_b.forEach(function(){

if(image_b.onerror){

for(let parent_block of hide){
hide.style.display = 'none';    
}

}

})
.Parent_block{
width:30%;
margin:0;
padding:0;
margin-left:10px;
margin-top:10px;
border:1px solid black;
display:inline-block;
height:250px;
}

img{
height:inherit;
width:100%;
<figure class="Parent_block"> <!-- ***** this block should disappear *****  =( -->
 
<img class="Child_Img" src="">

<figcaption class ="Img_text">1</figcaption> 

</figure>


<figure class="Parent_block"> 
 
<img class="Child_Img" src="https://i.ibb.co/kyXhZmB/photo-2021-11-18-14-40-18.jpg">

<figcaption class ="Img_text">2</figcaption> 

</figure>


<figure class="Parent_block"> <!-- ***** and this one too *****  =( -->
 
<img class="Child_Img" src="">

<figcaption class ="Img_text">3</figcaption> 

</figure>

about 4 years ago · Juan Pablo Isaza
3 Respostas
Responde à pergunta

0

  • on error - read more

  • closest - read more

let parent_block = document.querySelectorAll('.Parent_block');
let image_b = document.querySelectorAll('.Child_Img');

image_b.forEach(function(image){
   // check if any error (if image doesn't load in our case)
   image.addEventListener("error",()=>{
      // find closest class name and hide it
      image.closest(".Parent_block").style.display = "none";
   })
})
.Parent_block{
width:30%;
margin:0;
padding:0;
margin-left:10px;
margin-top:10px;
border:1px solid black;
display:inline-block;
height:250px;
}

img{
height:inherit;
width:100%;
<figure class="Parent_block"> <!-- ***** this block should disappear *****  =( -->
 
<img class="Child_Img" src="">

<figcaption class ="Img_text">1</figcaption> 

</figure>


<figure class="Parent_block"> 
 
<img class="Child_Img" src="https://i.ibb.co/kyXhZmB/photo-2021-11-18-14-40-18.jpg">

<figcaption class ="Img_text">2</figcaption> 

</figure>


<figure class="Parent_block"> <!-- ***** and this one too *****  =( -->
 
<img class="Child_Img" src="">

<figcaption class ="Img_text">3</figcaption> 

</figure>

about 4 years ago · Juan Pablo Isaza Relatório

0

There are some issues with the script.

  • You are running image_b.forEach and inside that you are trying to access image_b.onerror. This will not work since image_b is an array.
  • onerror is an event and not a property. So it cannot be accessed like this.
  • The syntax for(let parent_block of hide) is wrong.

Fixed Code

Logic

  • Select all elements with class name Child_Img.
  • Loop through the elements and register onerror event on each element in the list that we selected with class name Child_Img.
  • On the error event, find the closest element with class name Parent_block and hide it.

Working Fiddle

let image_b = document.querySelectorAll('.Child_Img');
image_b.forEach(function (img) {
    img.onerror = function(image) {
        img.closest(".Parent_block").style.display = 'none';
    }
})
.Parent_block {
    width: 30%;
    margin: 0;
    padding: 0;
    margin-left: 10px;
    margin-top: 10px;
    border: 1px solid black;
    display: inline-block;
    height: 250px;
}

img {
    height: inherit;
    width: 100%;
}
<figure class="Parent_block">
    <!-- ***** this block should disappear *****  =( -->

    <img class="Child_Img" src="">

    <figcaption class="Img_text">1</figcaption>

</figure>


<figure class="Parent_block">

    <img class="Child_Img" src="https://i.ibb.co/kyXhZmB/photo-2021-11-18-14-40-18.jpg">

    <figcaption class="Img_text">2</figcaption>

</figure>


<figure class="Parent_block">
    <!-- ***** and this one too *****  =( -->

    <img class="Child_Img" src="">

    <figcaption class="Img_text">3</figcaption>

</figure>

about 4 years ago · Juan Pablo Isaza Relatório

0

There are a number of problems with your script.
Some examples:

  1. onerror should not be checked with if, but with event listener.
  2. forEach needs an argument, you haven't provided any.
  3. You should add .onerror to the argument of foreach, and not directly to image_b
  4. There is no variable declared as hide in your script. I am guessing you intended for (let hide of parent_block)
  5. Assuming you fixed everything up to #4, the loop runs hide.style.display = 'none' for everything of parent_block, and not just the ones that includes the images with errors.

The following should work:

let parent_block = document.querySelectorAll('.Parent_block');
let image_b = document.querySelectorAll('.Child_Img');

image_b.forEach(function (cur_image) { 
    cur_image.onerror = function () {
        for(let block of parent_block){
            if(block.contains(cur_image) ){
                block.style.display = 'none';
            }
        }
    } 
}) 

But the loop over the parent_block is not necessary, you can just find the relevant ancestor of the cur_image:

// let parent_block = document.querySelectorAll('.Parent_block');
let image_b = document.querySelectorAll('.Child_Img');

image_b.forEach(function (cur_image) { 
    cur_image.onerror = function () {
        let hide = cur_image.closest('.Parent_block')
        hide.style.display = 'none';
    } 
}) 

Note that it's not even to required to run document.querySelectorAll('.Parent_block') anymore.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda