使用两个js文件后如何在HTML中调用函数？

Question

我正在构建一个项目，当我添加第二个 js 文件时，第一个 js 文件中的所有函数都停止在 HTML 中工作。 OBS：我使用 forEach 在第一个 js 文件中生成 HTML，使用第二个 js 文件提供所需的数据，并且它正在工作。

HTML 文件：

<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>

第一个js文件：

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>  `});

控制台： 未捕获的引用错误：handleClick 未在 HTMLButtonElement.onclick 中定义

我创建了另一个 js 文件并且它有效，我做了一些语法修复，但没有任何改变。

Answer 1

您正在将脚本作为模块导入。这意味着这些函数不会成为全局函数。相反，您需要使用模块而不是脚本标签进行导入。

<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>