引入第二个JS文件后HTML无法调用首个JS文件函数的问题

问题根源 #

你将script标签设为type="module"后，JS文件会以ES模块模式运行——模块内部的变量和函数默认处于独立作用域，不会自动挂载到全局window对象中。而HTML的onclick属性只能访问全局作用域的内容，所以点击按钮时会抛出ReferenceError，找不到clique函数。

解决方法 #

方法1：手动将函数挂载到全局作用域 #

在index.js中定义完clique函数后，添加一行代码将其挂载到window对象，让HTML能访问到：

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

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

// 挂载到全局window对象
window.clique = clique;

// 生成HTML的代码保持不变
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>  `
});

方法2：用事件监听器替代HTML onclick属性（更推荐） #

这种方式无需暴露全局函数，更符合模块化封装原则：

1. 先修改HTML，移除button的onclick属性，用data-index存储索引值：

<button class="selectbutton selectedButton" data-index="0"></button>
<button class="selectbutton selectedButton" data-index="1"></button>
<button class="selectbutton selectedButton" data-index="2"></button>

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

2. 在index.js中通过选择器获取按钮，添加点击事件监听器：

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

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

// 为所有按钮绑定点击事件
document.querySelectorAll('.selectbutton').forEach(button => {
  button.addEventListener('click', () => {
    const index = parseInt(button.dataset.index);
    clique(index);
  });
});

// 生成HTML的代码保持不变
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 is not defined应为笔误，核心问题仍是ES模块的作用域隔离导致函数无法被全局访问。

内容的提问来源于stack exchange，提问作者RafaTel