javascript模块，querySelector

Question

因此，对于学校作业，我需要制作一个javascript模块/小型库。所以我制作的东西会让鼠标歪斜。但事情总是出错。这是我得到的代码;

 var panels = (function () {

  var ANGLE = 45;
  var skewPanels = document.querySelectorAll(".skewPanel");
  var colors = ['#4975FB', '#924DE6', '#EF5252', '#F59500'];

  for (var i = 0; i < skewPanels; i++) {
    floatable(skewPanels[i], colors[i]);
  }

  function floatable (panel, color) {

    let content = panel.querySelector(".content");
    content.style.backgroundColor = color;

    panel.addEventListener('mouseout', e => {
      content.style.transform = `perspective(300px)
                                rotateY(0deg)
                                rotateX(0deg)`;
    });

    panel.addEventListener('mouseout', e => {
      var w = panel.clientWidth;
      var h = panel.clientHeight;
      var y = (e.offsetX - w * 0.5) / w * ANGLE;
      var x = (1 - (e.offsetY - h * 0.5)) / h * ANGLE;

      content.style.transform = `perspective(300px)
                                rotateX(${x}deg)
                                rotateY(${y}deg)`;
    });
  }

  return {
    floatable: floatable
  }

})();

这是html代码。

<div class="skewPanel">
<div class="content">HOVER</div>
</div>
<div class="skewPanel">
  <div class="content">HOVER</div>
</div>
<div class="skewPanel">
  <div class="content">HOVER</div>
</div>
<div class="skewPanel">
  <div class="content">HOVER</div>
</div>

<script type="text/javascript">
  panels.floatable();
</script>

所以我一直收到错误＆＃34;无法读取属性＆＃39; querySelector＆＃39;未定义＆＃34;。我不明白为什么会出现这个错误，我给它找div来寻找＆＃34; .content＆＃34;。我让它以非模块化的方式工作，但现在它一直在打破我。有人可以向我解释我做错了什么吗？