How can I call functions in my HTML after using two js files?

Question

I was building a project and when I added my second js file all my functions in my first js file stopped working in the HTML. OBS: I used a forEach to generate HTML in my first js file using my second js file to provide the needed data and it's working.

HTML file:

<button class="selectbutton selectedButton" onclick="clique(0);"></button>
<button class="selectbutton selectedButton" onclick="clique(1); "></button>
<button class="selectbutton selectedButton"onclick="clique(2);"></button>

<script type="module" src="scripts/index.js" ></script>

First js file:

import {podcasts} from "./podcasts.js";

function clique (valor) {
  index = valor;
  clearInterval(intervalId);
  intervalId = setInterval(() => {
    index = (index + 1) % images.length;
    sliderAction();
  }, 5000);
    sliderAction();
};

podcasts.forEach(podcast =>
 { podcastsContainer.innerHTML += `
  <pod class="podcastDiv">
  <img src="images/podcastsicons/sacocheioicon.jpg" alt="" class="podcastIcon">
  <article class="podcastInfo">
    <h1 class="podcastName">${podcast.name}</h1>
    <p class="podcastDescription"> ${podcast.info}</p>
    <aside>${podcast.subinfo}</aside>
  </article>
</pod>  `});

console: Uncaught ReferenceError: handleClick is not defined at HTMLButtonElement.onclick

I created another js file and it worked, I made some syntax fix but nothing changed.

Answer 1

You're importing the script as a module. That means the functions do not become global functions. Instead, you need to import using a module, not a script tag and not attach handlers as HTML attributes, which you shouldn't do nowadays anyway to protect yourself from XSS attacks.

See ES6 Modules: Undefined onclick function after import

<button class="selectbutton selectedButton"></button>
<button class="selectbutton selectedButton"></button>
<button class="selectbutton selectedButton"></button>

<script type="module">

import {clique} from "./scripts/index.js";

for (const [i, button] of Object.entries(document.querySelectorAll('button.selectbutton'))) {
    button.addEventListener('click', () => clique(i));
}
</script>