こんにちは。

クリックしても要素が動かすことができず質問させて頂きました。
問題点をご教授お願い致します。

コードは以下となります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>CSS Animacitions</title>
    <style>
      .box {
        width: 40px;
        height: 40px;
        background: skyblue;
        cursor: pointer;
        transition: 2s;
      }
      .box.moved {
        transform: translate(400px, 0);
      }
    </style>
  </head>

  <body>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <script>
      (() => {
        'use strict';
        document.querySelector('body').addEventListener('click', () => {
          document.querySelectorALL('.box').forEach(box) => {
            box.classList.add('moved');
          });  
        });
      })();  
    </script>
  </body>
</html>