I'm trying to build a SPA (My first attempt) I'm having an issue where I'm trying to fire my contact-btn however it's not firing. My contact-btn fires in my navbar but the contact button thats in my dashboard.js that loads into the "app" div doesn't work.
Can someone help or offer suggestions as to why this doesn't work?
script.js
const buttons= document.querySelectorAll('.contact-btn');
buttons.forEach(element =>{
element.addEventListener("click", hey);
});
function hey(){
console.log("hey")
}dashboard.js
async getHtml(){
return `
<div class="main">
<div class="section">
<div class="uvp">
</h1>
<p>Think of a catchy uvp that will bring people in relating to building your online business.</p>
<button class="contact-btn">Contact us</button>
</div>
<img src="images/Luke.png" alt="Image of me, Luke">
</div>
</div>index.html
<body>
<header class="scrollHead">
<div class="logo">
<a href="/"><img src="/images/Luke.png" alt="luke logo of face" width="110px" height="auto"></a>
<h2>luke</h2>
</div>
<nav>
<a href="/About" data-link>About</a>
<a href="/Portfolio" data-link>Portfolio</a>
<button class="contact-btn" data-link>Contact us</button>
</nav>
</header>
<div id="app"></div>
<!-- Footer -->
<script src="/static/js/index.js" type="module"></script>
<script src="./script.js" type="module"></script>
</body>