Uncaught DOMException: Not able to run codepen code on my html page

Question

I tried to implement animation pop up modal from this link .

I carefully copied all the code inside my bootstrap template. Now when i tried to run it, it only shows a button which doesn't work at all. Then i check developer option in chrome i get to see this error

`Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at createModal (file:///C:/Users/file:///C:/Users/xyz/Desktop /js/popvideo.js:75:8)
    at file:///C:/Users/xyz/Desktop/js/popvideo.js:4:13`

and at popvideo.js line number 75 has this code ` body.removeChild(container);

I don't understand when i am getting this error when the pen works fine.

Here is the compete code


 
    
        
            

                                               

                    Lorem ipsum dolor sit amet.

                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis excepturi ut inventore consectetur quos rerum quibusdam accusamus, labore itaque assumenda consequatur cum saepe velit quidem ipsa facilis. Repellendus, reiciendis quam?

                    
                        
                            Register        
                        
                    

              

            
            
  





      
    

    
      I'm a modal
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis excepturi ut inventore consectetur quos rerum quibusdam accusamus, labore itaque assumenda consequatur cum saepe velit quidem ipsa facilis. Repellendus, reiciendis quam?

`

JS - popvideo.js

console.clear();

var body = document.body;
var modal = createModal(document.querySelector("#modal-1"));
var openButton = document.querySelector("#open-button");

openButton.addEventListener("click", function() {
  modal.open();
});

function createModal(container) {

  var content = container.querySelector(".modal-content");
  var dialog = container.querySelector(".modal-dialog");
  var polygon = container.querySelector(".modal-polygon");
  var svg = container.querySelector(".modal-svg");

  var point1 = createPoint(45, 45);
  var point2 = createPoint(55, 45);
  var point3 = createPoint(55, 55);
  var point4 = createPoint(45, 55);

  var animation = new TimelineMax({    
      onReverseComplete: onReverseComplete,
      onStart: onStart,
      paused: true
    })     
    .to(point1, 0.3, {
      x: 15,
      y: 30,
      ease: Power4.easeIn
    }, 0)
    .to(point4, 0.3, {
      x: 5,
      y: 80,
      ease: Power2.easeIn
    }, "-=0.1")
    .to(point1, 0.3, {
      x: 0,
      y: 0,
      ease: Power3.easeIn
    })
    .to(point2, 0.3, {
      x: 100,
      y: 0,
      ease: Power2.easeIn
    }, "-=0.2")
    .to(point3, 0.3, {
      x: 100,
      y: 100,
      ease: Power2.easeIn
    })
    .to(point4, 0.3, {
      x: 0,
      y: 100,
      ease: Power2.easeIn
    }, "-=0.1")  
    .to(container, 1, {
      autoAlpha: 1
    }, 0)  
    .to(content, 1, {
      autoAlpha: 1
    })

  var modal = {
    animation: animation,
    container: container,
    content: content,
    dialog: dialog,    
    isOpen: false,
    open: open,
    close: close   
  };

  body.removeChild(container);

  function onClick() {

    if (modal.isOpen) {
      close();
    }
  }

  function onStart() {
    body.appendChild(container);
    container.addEventListener("click", onClick);
  }

  function onReverseComplete() {
    container.removeEventListener("click", onClick);
    body.removeChild(container);
  }

  function open() {
    modal.isOpen = true;
    animation.play().timeScale(2);
  }

  function close() {
    modal.isOpen = false;
    animation.reverse().timeScale(2.5);
  }

  function createPoint(x, y) {
    var point = polygon.points.appendItem(svg.createSVGPoint());
    point.x = x || 0;
    point.y = y || 0;
    return point;
  }

  return modal;
}

CSS

/*Pop Up Video*/
.buttonpop {
  cursor: pointer;
  padding: 0 6px;
  min-width: 88px;
  min-height: 36px;
}

.controls {
  padding: 24px;
}

.modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
}

.modal-dialog {
  width: 70vmin;
  height: 70vmin;
  position: relative;
  overflow: hidden;
}

.modal-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal-polygon {
  fill: #ab47bc;
}

.modal-content {
  position: relative;
  top: 0;
  left: 0;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  color: rgba(255, 255, 255, 0.87);
}

Please guide me to resolve this issue. P.S- I am not good in JS

Roger · Accepted Answer

The problem is that your #modal-1 element isn't the child of the body container as it is the case with the codepen you got the code from. It's a child of the unnamed div with the background:url(images/Elaxer-Screen.png),which is why it gives you the error. What you can simply do is add a parent container and reference it in your js file.

Here is how I did it:

Step 1: Edit your HTML file by adding parentContainer id.


 
  
 
    
       
     
     
      I'm a modal
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis excepturi ut inventore consectetur quos rerum quibusdam accusamus, labore itaque assumenda consequatur cum saepe velit quidem ipsa facilis. Repellendus, reiciendis quam?

Step 2: Initialize parent container as a variable.

var parentCont = document.querySelector("#parentContainer");

Step 3: Remove the body variable on line 76 and use the parent container variable.

parentCont.removeChild(container);

Here is a reference to my codepen: my codepen

Works fine. Good luck and hope this helps!

Uncaught DOMException: Not able to run codepen code on my html page

Answers (1)

Related Questions