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 z length 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

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 26, 2024

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

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.

------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------------------------

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

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.