Parcel启动项目时onclick绑定check函数未定义报错修复

直接本地打开HTML文件时，JS文件里顶层定义的check()函数会默认挂载到浏览器全局window对象上，HTML内联写的onclick="check()"可以直接找到该函数，所以功能正常。
使用parcel index.html启动项目时，Parcel会对JS文件做模块化处理，每个JS文件的作用域默认是隔离的，文件内顶层定义的函数不会自动暴露到全局作用域，因此内联事件触发时找不到check函数，抛出引用错误。

你可以任选以下一种方案修复：

• 方案1：最小改动，显式将函数暴露到全局
  直接修改pricing.js的函数定义，将函数挂载到全局window对象上即可，修改后的代码如下：

  window.check = function() {
    var checkBox = document.getElementById("checbox");
    var text1 = document.getElementsByClassName("text1");
    var text2 = document.getElementsByClassName("text2");
    for (var i = 0; i < text1.length; i++) {
      if (checkBox.checked == true) {
        text1[i].style.display = "block";
        text2[i].style.display = "none";
      } else if (checkBox.checked == false) {
        text1[i].style.display = "none";
        text2[i].style.display = "block";
      }
    }
  }
  

  修改保存后刷新页面即可正常切换定价，不需要改动HTML代码。

• 方案2：规范写法，移除内联事件在JS中绑定（推荐）
  内联onclick事件本身就容易引发作用域问题，更推荐直接在JS中完成事件绑定，不需要依赖全局函数：

  1. 先修改HTML，删除input标签上的内联onclick属性，修正后复选框代码如下：

  <input type="checkbox" id="checbox" />
  

  2. 替换pricing.js的全部代码，在DOM加载完成后直接给复选框绑定切换事件：

  document.addEventListener('DOMContentLoaded', function () {
    var checkBox = document.getElementById("checbox");
    var text1 = document.getElementsByClassName("text1");
    var text2 = document.getElementsByClassName("text2");
  
    function togglePricing() {
      for (var i = 0; i < text1.length; i++) {
        if (checkBox.checked) {
          text1[i].style.display = "block";
          text2[i].style.display = "none";
        } else {
          text1[i].style.display = "none";
          text2[i].style.display = "block";
        }
      }
    }
  
    // 绑定切换事件
    checkBox.addEventListener('change', togglePricing);
    // 初始化页面加载时的默认显示状态
    togglePricing();
  })
  

注：你当前复选框的id拼写为checbox（正确拼写应为checkbox），目前HTML和JS中拼写一致不影响运行，后续可以统一修正避免拼写错误引发的问题。

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