removeChild works only out of the img

JavaScript
1

I want to remove overlay when i was clicking and the image but it didn’t. The overlay dissapearing when i clicked on div (overlay) but not when I clicked on photo.The console didn’t show me errors.

(function (){
    
  

    window.onclick=function (e){
    
    var hit=e.target.tagName;
    

    if(hit=='IMG'){
    
    overlay=document.createElement('div');
    overlay.id='photo';
    document.body.appendChild(overlay);
    overlay.style.position='absolute';
    overlay.style.top=0;
    overlay.style.background='rgba(0,0,0,0.53)';
    overlay.style.cursor='pointer';
    overlay.style.width=window.innerWidth+"px";
    overlay.style.height=window.innerHeight+"px";
    
    
    photo=e.target.src;
    popeikona=document.createElement('IMG');
    popeikona.src=photo;
    overlay.appendChild(popeikona);
    popeikona.style.width='550px';
    popeikona.style.height='380px';
    
    popeikona.style.margin='15%';
    
    
    
   }; 
   
        
        overlay.addEventListener('click',function (){
        
        overlay.parentElement.removeChild(overlay);
        
    });
        

    
     window.onscroll=function (){
         
         if(overlay){
         overlay.style.top=window.pageYOffset+"px";
         overlay.style.left=window.pageXOffset+"px";
     }
     };
     
  console.log(overlay);  
}



}());
2

Could you show us the markup this is being applied to?

4 
<p><img class="alignright" src="images/<?php echo $post_image; ?>" width="200" height="150" alt="" /></p>

and all the document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NewsTheme - Demo Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
<script src="js/wordpress.js"></script>
</head>
<body>
    
    
<!-- BEGIN navigation -->
<?php include 'main_includes/navigation.php';   ?>
 <?php include 'main_includes/connect_db.php';   ?>
<!-- END navigation -->



<!-- BEGIN wrapper -->
<div class="wrapper">
    
    
  <!-- BEGIN header -->
  <div id="header"><h2 id="epikefalida">ΔΗΜΟΣ ΑΡΓΟΥΣ ΟΡΕΣΤΙΚΟΥ  Γρ.Γεωπόνου</h2> 
      <div class="photo"><img src="images/teliko.jpg" alt="" height="150px" width="430" style="margin-top: 0px;margin-left: 0px;"/></div>
  </div>
  <!-- END header -->
  
  
  <!-- BEGIN body -->
  <div id="body">
    <!-- BEGIN content -->
    <div id="content">
      <!-- begin post -->
      <div class="recent post">
         <?php 
         if(isset($_GET['source'])){
             $post_id=$_GET['source'];
             
            $query="SELECT * FROM posts WHERE post_id=$post_id ";
            $select_query= mysqli_query($connect, $query);
            $num_rows=  mysqli_num_rows($select_query);
            $row=  mysqli_fetch_assoc($select_query);
            $post_title=$row['post_title'];
            $post_id=$row['post_id'];
            $post_keimeno=$row['post_keimeno'];
            $post_publisher=$row['post_publisher'];
            $post_date=$row['post_date'];
            $post_image=$row['post_image'];
             
             
             
             
         }
         
         
         
         ?> 
        <h2><?php echo $post_title; ?></h2>
        
        <p><img class="alignright" src="images/<?php echo $post_image; ?>" width="200" height="150" alt="" /></p>
        <p><?php echo $post_keimeno; ?></p>
        <p><?php echo "$post_publisher"."&nbsp&nbsp&nbsp&nbsp&nbsp"."$post_date"; ?></p>
      </div>
      <!-- end post -->
    </div>
    <!-- END content -->
    
    
    <!-- BEGIN sidebar -->
    <?php include 'main_includes/sidebar.php';  ?>
    <!-- END sidebar -->
    
    
  </div>
  <!-- END body -->
  <div class="break"></div>
</div>
<!-- END wrapper -->

<!-- BEGIN footer -->
<?php include 'main_includes/footer.php';  ?> 
<!-- END footer -->

</body>
</html>
5

It would be more useful to have the HTML that’s being output, rather than the PHP generating it, that way I can quickly set up a demo to look at what’s going on.

6

I knocked up a quick Codepen with some minimal markup in it just to see what’s happening. As described, when clicking on the image in the markup, the overlay appears. The overlay will clear when the overlay itself is clicked, it doesn’t though when the image set in the overlay is clicked.

I’ve not got an immediate solution for you, but I did add a line into the event listener to log out where on the overlay it will respond to a click event. Seemingly, it responds when the image is clicked, which makes it a bit of a puzzle as to why the function attached to the listener isn’t run.

    overlay.addEventListener('click', function() {
      console.log('Logged from ' + overlay);
      overlay.parentElement.removeChild(overlay);
    });

Here’s the Codepen

1 Like
7

Thanks a lot my friend but unfortunately not working.I scratch my head the last 4 hours to understand why this is happen.

8

Likewise. Currently, my JS is in its formative stage, so I’m hoping a more experienced head will contribute something at some point.

1 Like
9

The overlay is being removed when you click on the image, but it’s immediately being re-added, which is why it appears that nothing is happening.

Here’s what’s happening:

  • The first click creates and displays the image overlay
  • A click handler is added to the overlay
  • Clicking the overlaid image fires the handler to remove it
  • The click handler on the window object then fires in response to the same click, and re-adds the overlay

One way to prevent this is to avoid adding the first click handler to the window object, and instead add it to the image. Alternatively, you can call stopPropagation() on the event, to stop it from travelling up from the overlay to the window (as events ‘bubble’ up the DOM from the target):

overlay.addEventListener('click', function(e) {
  e.stopPropagation();
  overlay.parentElement.removeChild(overlay);
});
2 Likes
12

WORKING!!Thanks a lot lot lot my friend.

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.