I’m trying to open the same modal but w different content. Just a little project to explain networking ports. However, the modals won’t open. I keep getting an error: Uncaught TypeError: Cannot read properties of null (reading ‘style’)
at HTMLButtonElement.btn.onclick (script.js:9:39)
Any clue what the issue could be? Thanks
<body>
<h1>Network Portal</h1>
<button class='show-modal' data-modal="NTP">NTP</button>
<button class='show-modal' data-modal="HTTPS">HTTPS</button>
<button class='show-modal' data-modal="DHCP">DHCP</button>
<button class='show-modal' data-modal="DNS">DNS</button>
<button class='show-modal' data-modal="FTP">FTP</button>
<button class='show-modal' data-modal="SSH">SSH</button>
<div class="modal" id="ntp">
<div class="modal-content">
<div class="'modal-header">NTP PORT 123<button class="icon modal-close"><i class="material-icons">close</i>
</button></div>
<div class="modal-body">This port is responsible for</div>
<div class="modal-footer"><button class="link modal-close">Close Modal</button></div>
</div>
</div>
<div class="modal" id="https">
<div class="modal-content">
<div class="'modal-header">HTTPS PORT 443<button class="icon"><i class="material-icons">close</i>
</button></div>
<div class="modal-body">This port is responsible for</div>
<div class="modal-footer"><button class="link modal-close">Close Modal</button></div>
</div>
</div>
<div class="modal" id="dhcp">
<div class="modal-content">
<div class="'modal-header">DHCP PORT 67/68<button class="icon"><i class="material-icons">close</i>
</button></div>
<div class="modal-body">This port is responsible for</div>
<div class="modal-footer"><button class="link modal-close">Close Modal</button></div>
</div>
</div>
<div class="modal" id="dns>
<div class=" modal-content ">
<div class=" 'modal-header">DNS PORT 53<button class="icon"><i class="material-icons">close</i>
</button></div>
<div class="modal-body">This port is responsible for</div>
<div class="modal-footer"><button class="link modal-close">Close Modal</button></div>
</div>
</div>
<div class="modal" id="ftp">
<div class="modal-content">
<div class="'modal-header ">FTP PORT 20/21<button class="icon "><i class="material-icons ">close</i>
</button></div>
<div class="modal-body ">This port is responsible for</div>
<div class="modal-footer "><button class="link modal-close ">Close Modal</button></div>
</div>
</div>
<div class="modal " id="ssh ">
<div class="modal-content ">
<div class=" 'modal-header">SSH PORT 22<button class="icon"><i class="material-icons">close</i>
</button></div>
<div class="modal-body">This port is responsible for</div>
<div class="modal-footer"><button class="link modal-close">Close Modal</button></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
--CSS--
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
.show-modal {
padding: 8px 16px;
background: royalblue;
color: white;
border-radius: 10px;
outline: none;
border: none;
}
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 2;
display: none;
}
.modal-content {
background: #fff;
margin-top: 100px;
width: 50%;
margin-left: auto;
margin-right: auto;
padding: 8px 24px;
border-radius: 4px;
z-index: 4;
}
.modal-header {
font-weight: 500;
padding: 10px 0;
font-size: 26px;
}
.modal-header .modal-close {
float: right;
font-size: 20px;
background: #efefef;
border: 0;
outline: 0;
padding: 5px 8px;
border-radius: 50%;
}
.modal-body {
color: #7b7b7b;
padding: 15px 0;
}
.modal-footer {
padding: 15px 0;
}
.modal-footer .modal-close {
padding: 8px 16px;
font-size: 14px;
border: none;
outline: none;
border-radius: 4px;
color: #1a73e8;
}
--JS--
var modalBtns = document.querySelectorAll(".show-modal");
modalBtns.forEach(function(btn) {
btn.onclick = function(e) {
e.preventDefault();
var modal = btn.getAttribute("data-modal");
document.getElementById(modal).style.display = "block";
};
});
var closeBtns = document.querySelectorAll(".modal-close");
closeBtns.forEach(function(btn) {
btn.onclick = function() {
var modal = btn.closest(".modal");
modal.style.display = "none";
};
});
window.onclick = function(e) {
if (e.target.className === 'modal') {
e.target.style.display = "none";
}
};