Hey there, I'm having a JavaScript question. So, I have a panel that opens a window, and it works fine. But the issue arises when I close the window and try to open it again - it doesn't work. I have to reload the page every time in order to open the window again after clicking close. Any tips on how to make it work without needing to reload the page? Thanks in advance!
<admin class="admin">
<div onclick="createModalAddPost()" class="admin-btn"><i class="fas fa-plus"></i></div>
<div class="admin-btn"><i class="fas fa-plus"></i></div>
</admin>
<!--Modal window-->
<div class="bgPage blog" >
<div class="admin-add">
<form action="">
<label for="">Fill in post details</label>
<input type="text" placeholder="Enter post title">
<textarea name="" id="" placeholder="Enter post text"></textarea>
<input type="file" accept="image/*" multiple onchange="changeImages(this)">
<div class="image-check"></div>
<div class="pre-order__button blog-bt">Create</div>
</form>
</div>
</div>
function createModalAddPost() {
let form = document.querySelector(".admin-add");
if(!form){
console.warn("Element [.admin-add] not found");
return;
}
let closeMain = document.createElement("i");
closeMain.classList.add("fas", "fa-times");
closeMain.onclick = function () {
this.parentElement.parentElement.remove();
};
let blog = document.querySelector(".blog");
blog.classList.add("visual");
if (form.append(closeMain)) {
window.parent.location = window.parent.location.href;
}
}
.visual {
display:flex;
justify-content: center;
align-items: center;
display: block;
}
.blog {
display:flex;
justify-content: center;
align-items: center;
display: none;
}