hello Im doing my best to fix my code...its a modal for web development but I cant figure it out it keeps saying prayer.html:54 Uncaught TypeError: Cannot read property 'addEventListener' of null at prayer.html:54. can someone take a look at it please I need help and can you tell me what i was doing wrong thank you. ------------------------------------------------------------------------------------------------------ /*call*/ function includeHTML() { var z, i, elmnt, file, xhttp; /*loop through a collection of all HTML elements:*/ z = document.getElementsByTagName("*"); for (i = 0; i elmnt = z[i]; /*search for elements with a certain atrribute:*/ file = elmnt.getAttribute("w3-include-html"); if (file) { /*make an HTTP request using the attribute value as the file name:*/ xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4) { if (this.status == 200) {elmnt.innerHTML = this.responseText;} if (this.status == 404) {elmnt.innerHTML = "Page not found.";} /*remove the attribute, and call this function once more:*/ elmnt.removeAttribute("w3-include-html"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /*exit the function:*/ return; } } } //script // Get modal element var modal = document.getElementById('simpleModal'); // get open modal button var modalBtn = document.getElementById('modalBtn'); //Get close button var closeBtn = document.getElementsByClassName('closeBtn')[0]; //Listen for open click modalBtn.addEventListener('click', openModal); //Listen for close click closeBtn.addEventListener('click', closeModal); //Listen for outsideclick window.addEventListener('click', outsideClick); // Function to open modal function openModal(){ modal.style.display = 'block'; } // Function to close modal function closeModal(){ modal.style.display = 'none'; } //Function to close modal if outside click function outsideClick(e){ if(e.target == modal){ modal.style.display = 'none'; } } //script includeHTML(); --------------------------------------------------------------------------------------------------------------------------------------------- this is style.css body{ font-family: Arial, Helvetica, sans-serif; font-size:17px; line-height:1.6; } .button{ background:coral; padding:1em 2em; color:#fff; border:0; margin-left:auto; margin-right:auto; display:block; } .button:hover{ background:#333; } .modal{ display:none; position:fixed; z-index:1; left:0; top:0; height: 100%; width:100%; overflow: auto; background-color: rgba(0,0,0,0.5); } .modal-content{ background-color:#f4f4f4; margin: 20% auto; width:70%; box-shadow: 0 5px 8px 0 rgba(0,0,0,0.2), 0 7px 20px 0 rgba(0,0,0,0.17); animation-name:modalopen; animation-duration:1s; } .modal-body{ height:auto; width:auto; padding:10px 20px; } .modal-footer{ background:#6f9fd8; padding:10px; color:#fff; text-align:center; } .closeBtn{ color:#ccc; float:right; font-size:30px; color:white; } .closeBtn:hover,.closeBtn:focus{ color:#000; text-decoration: none; cursor:pointer; } @keyframes modalopen{ from{opacity:0} to {opacity: 1} } .modal-header h2, .modal-footer h3{ margin:0; } .modal-header{ background:#6f9fd8; padding:10px; color:#fff; text-align:center; } table, h3{ border-color:deepskyblue; text-align: center; } /*style for modal*/ ------------------------------------------------------------------------------------------------------------------------------ this is the modal.html Click here for availabilty × Believe2achieve Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, vel, eveniet. Unde rerum, saepe ipsa magnam sed. Saepe voluptas corporis inventore ad similique dolor neque explicabo nam doloremque, iste tempore.