HTML中cart函数调用报错Uncaught ReferenceError问题求助

问题根源 #

你给JS脚本标签加了type="module"，ES模块的作用域是独立的，内部定义的函数不会自动暴露到全局作用域，所以HTML里的内联onclick="cart()"找不到这个函数。

三种解决方案 #

• 方案一：将函数挂载到全局window对象
  修改你的JavaScript代码，把cart函数绑定到window上：

  var menu = document.querySelector('.cartmenu')
  
  window.cart = function() {
    menu.classList.toggle('show');
  }
  

• 方案二：移除模块类型（如果不需要ES模块功能）
  把HTML里的script标签的type="module"去掉：

  <script src="javascript.js"></script>
  

  这样JS代码会在全局作用域执行，cart函数就能被内联事件访问到。

• 方案三：使用事件监听替代内联onclick（推荐）
  这种写法更符合现代前端规范，避免全局污染：

  1. 先移除HTML里的onclick属性：

     <div class="cart navheading">
       <i class="fa-solid fa-cart-shopping "></i>
       <a href="#">Cart</a>
     </div>
     

  2. 在JavaScript里添加事件监听：

     var menu = document.querySelector('.cartmenu')
     var cartButton = document.querySelector('.cart.navheading')
     
     cartButton.addEventListener('click', function() {
       menu.classList.toggle('show');
     })
     

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