So I'm new and still learning javascript and I want to create a multiple modals pop up. 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. 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

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 >
  <img src="img/1.png" alt="image" data-modal="project1">
  <p>Image 1</p>
</div>
<div >
  <img src="img/2.png" alt="image" data-modal="project2">
  <p>Image 2</p>
</div>
<div >
  <img src="img/3.png" alt="image" data-modal="project3">
  <p>Image 3</p>
</div>
<div >
  <img src="img/4.png" alt="image" data-modal="project4">
  <p>Image 4</p>
</div>
<div >
  <img src="img/5.png" alt="image" data-modal="project5">
  <p>Image 5</p>
</div>
<div >
  <img src="img/6.png" alt="image" data-modal="project6">
  <p>Image 6</p>
</div>
<!-- Multiple Image Butto -->

<!-- Multiple Modals -->
<div  id="project1">
  <div >
    <div >
      <span >&times;</span>
      <h2>Project 1</h2>
    </div>
    <div >
      <p>Text 1.</p>
    </div>
  </div>
</div>
<div  id="project2">
  <div >
    <div >
      <span >&times;</span>
      <h2>Project 2</h2>
    </div>
    <div >
      <p>Text 2.</p>
    </div>
  </div>
</div>
<div  id="project3">
  <div >
    <div >
      <span >&times;</span>
      <h2>Project 3</h2>
    </div>
    <div >
      <p>Text 3.</p>
    </div>
  </div>
</div>
<div  id="project4">
  <div >
    <div >
      <span >&times;</span>
      <h2>Project 4</h2>
    </div>
    <div >
      <p> Text4.</p>
    </div>
  </div>
</div>
<div  id="project5">
  <div >
    <div >
      <span >&times;</span>
      <h2>Project 5</h2>
    </div>
    <div >
      <p>Text 5</p>
    </div>
  </div>
</div>
<div  id="project6">
  <div >
    <div >
      <span >&times;</span>
      <h2>Project 6</h2>
    </div>
    <div >
      <p>Text 6</p>
    </div>
  </div>
</div>
<!-- Multiple Modals -->

CodePudding user response：

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. Because of this when you call the openModal() function there is no id being passed properly.

<span dataset-modal="projectX">&times;</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. 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