[英]Code is working and runs fine, but why I'm getting error at console , Uncaught TypeError: Cannot read properties of null (reading 'style')?
So I'm new and still learning javascript and I want to create a multiple modals pop up.所以我是新手,仍在学习 javascript,我想创建一个多模式弹出窗口。 when i try to open every modals and try to closing it there seems no problem at all.
当我尝试打开每个模式并尝试关闭它时,似乎根本没有问题。 But I get an error message at console(Uncaught TypeError: Cannot read properties of null (reading 'style')) when I'm closing it.
但是当我关闭它时,我在控制台收到一条错误消息(Uncaught TypeError:无法读取 null 的属性(读取'style'))。 I'm having a lot of trouble figuring out:(.
我很难弄清楚:(。
Can you help me take a look at this code below and correcting it?你能帮我看看下面这段代码并改正吗? that would be greatly appreciated!
那将不胜感激!
HTML HTML
I'm using the image for the button.我正在使用按钮的图像。
let imageButtons = document.querySelectorAll('img[data-modal], span.close'); let modals = document.querySelectorAll('.modal'); function openModals(id) { let a = document.getElementById(id); a.style.display = "block"; } function closeModals() { modals.forEach(a => { a.style.display = "none"; }); } imageButtons.forEach(a => { a.addEventListener('click', event => { closeModals(); openModals(a.dataset.modal); }); }); modals.forEach(a => { let x = a.querySelector('.close'); x.addEventListener('click', closeModals); });
.modal { display: none; position: fixed; z-index: 1; padding-top: 100px; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.4); }.modal-content { position: relative; background-color: #78909C; margin: auto; padding: 0; border: 1px solid white; border-radius: 10px; width: 50%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }.close { color: white; float: right; font-size: 20px; }.close:hover, .close:focus { color: #bbb; cursor: pointer; }.modal-header { padding: 2px 16px; color: white; text-align: center; }.modal-header h2 { padding-top: 20px; }.modal-body { padding: 2px 16px; background-color: white; margin: 20px; border-radius: 10px; } ```
<.-- Multiple Image Butto --> <div class="image-slider fade"> <img src="img/1.png" alt="image" data-modal="project1"> <p>Image 1</p> </div> <div class="image-slider fade"> <img src="img/2.png" alt="image" data-modal="project2"> <p>Image 2</p> </div> <div class="image-slider fade"> <img src="img/3.png" alt="image" data-modal="project3"> <p>Image 3</p> </div> <div class="image-slider fade"> <img src="img/4.png" alt="image" data-modal="project4"> <p>Image 4</p> </div> <div class="image-slider fade"> <img src="img/5.png" alt="image" data-modal="project5"> <p>Image 5</p> </div> <div class="image-slider fade"> <img src="img/6;png" alt="image" data-modal="project6"> <p>Image 6</p> </div> <.-- Multiple Image Butto --> <;-- Multiple Modals --> <div class="modal" id="project1"> <div class="modal-content"> <div class="modal-header"> <span class="close">×.</span> <h2>Project 1</h2> </div> <div class="modal-body"> <p>Text 1;</p> </div> </div> </div> <div class="modal" id="project2"> <div class="modal-content"> <div class="modal-header"> <span class="close">×.</span> <h2>Project 2</h2> </div> <div class="modal-body"> <p>Text 2;</p> </div> </div> </div> <div class="modal" id="project3"> <div class="modal-content"> <div class="modal-header"> <span class="close">×.</span> <h2>Project 3</h2> </div> <div class="modal-body"> <p>Text 3;</p> </div> </div> </div> <div class="modal" id="project4"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h2>Project 4</h2> </div> <div class="modal-body"> <p> Text4.</p> </div> </div> </div> <div class="modal" id="project5"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h2>Project 5</h2> </div> <div class="modal-body"> <p>Text 5</p> </div> </div> </div> <div class="modal" id="project6"> <div class="modal-content"> <div class="modal-header"> <span class="close">×</span> <h2>Project 6</h2> </div> <div class="modal-body"> <p>Text 6</p> </div> </div> </div> <!-- Multiple Modals -->
The problem is in the close button.问题出在关闭按钮上。 All the other buttons work properly but you forgot to add the
dataset-modal="projectX"
to the close button.所有其他按钮都可以正常工作,但您忘记将
dataset-modal="projectX"
添加到关闭按钮。 Because of this when you call the openModal() function there is no id being passed properly.因此,当您调用 openModal() 函数时,没有正确传递任何 id。
<span class="close" dataset-modal="projectX">×</span>
for each of your modals will solve the issue对于您的每个模态都将解决问题
I debugged this issue by quickly putting a console log in the function that was causing the issue.我通过快速将控制台日志放入导致问题的函数中来调试此问题。 Noticed that opening the regular buttons caused no issue but when closing the buttons via the "X" is how the error began to appear.
请注意,打开常规按钮不会引起任何问题,但是当通过“X”关闭按钮时,错误就开始出现了。 Understanding what your functions are calling is very important.
了解您的函数正在调用什么非常重要。 You might find it helpful to give more descriptive variable names in the functions instead of just
a
您可能会发现在函数中提供更具描述性的变量名称而不仅仅是
a
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.