I have a webpage where I want to include footer from external footer html file using (w3-include). The footer also has its own JavaScript file. Inside the footer, I have a dialog box that pops for users to subscribe. The footer is working alright but the JavaScript function is not working when I click on the subscribe button to display the dialog.
here is the main html file
<body>
<section class="related">
<div class="rpst">
--- some text here ----
</div>
</section>
<div w3-include-html="footer.html"></div>
<script src="subscribeDialog.js"></script>
<script src="include.js"></script>
<script>includeHTML();</script>
</body>
Here is the footer.html
<section class="footer">
<div class="box-container">
--- footer contents here ----
</div>
<div class="column_2">
<div class="dialog">
<div class="header">
<p>Subscribe to our newsletter</p>
<i class="fas fa-times" id="closeDialog"></i>
</div>
<section class="subs">
<div class="subs-inputBox">
<form action="subscribe_submit.php" method="POST" autocomplete="off">
<div class="subs-inputBox">
<div class="form-group">
<input name="subs_email" type="email" required class="form-control" id="email" placeholder="Enter email"/>
<button class="btn btn-primary" type="submit" name="sendmail" value="Send">Submit</button>
</div>
</form>
</div>
</section>
</div>
<div class="subContainer">
<h2>Subscribe to our newsletter</h2>
<h1 id="openDialog">subscribe</h1>
</div>
</div>
</section>
</div>
</section>
<script src="subscribeDialog.js"></script>
Here is the subscribeDialog.js
let d = document.querySelector(".dialog");
let openSubX = document.querySelector("#openDialog");
let closeSubX = document.querySelector("#closeDialog");
const closeDialog = ()=>{
d.style.visibility="hidden";
};
openDialog.addEventListener("click", ()=>{
d.style.visibility="visible";
console.log("working");
});
closeDialog.addEventListener("click", ()=>{
closeDialog();
console.log("working");
});
I have been working on this error for some days now but to no avail. Anytime I click on the subscribe button it stays unchanged thus nothing happens, which I want it to open the dialog when click.
I got something similar to my case but still doesn’t work at my end.