イベントと処理について、ひとつのコードにするのではなく、どの様にしてイベントと処理を区別して記述するのか。

前提

イベントと処理について、ひとつの処理にするのではなく、どの様にしてイベントと処理を区別して記述するのか。

実現したいこと

下記コードにてjQueryを使い神経衰弱を作成しようとしたのだがイベントと処理のコードが一つのスコープ内にてまとめて記述をしているとエラーなく動くのですが、イベントと処理を別にして記述するとうまく反応してくれないのでイベントと処理という別々の記述で記述できるやり方を知りたい。

該当のソースコード

ソースコード
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <title>07 | 1-jQuery</title>
  <link rel="stylesheet" href="../../00-tools/css/reset.css">
  <link rel="stylesheet" href="../../00-tools/css/base.css">
  <link rel="stylesheet" href="css/style.css">

  <script type="text/javascript" src="js/jquery.js" defer></script>

</head>
<body>
  <ul class="lists clearfix"></ul>
<script defer>
window.addEventListener( 'load' , function(){

  const cardNum = [];
  const totalCard = 16;
  var $cardList  = $(".lists");

  for (var i = 1; i <= totalCard/2; i++){
    cardNum.push(i,i);
  }

  function openCard($card){
    $card.css('pointer-events','none')
         .text($card.data('num'));
  }

  function closeCard($card){
    $card.css('pointer-events','')
         .text('?');
  }

  $(function(){
    cardNum.sort(function(){
      return Math.random() - Math.random();
    })

    .map(function(num){
      return "<li class='unopened' data-num='" + num + "'>?</li>";
    })

    .forEach(function(element){
      $cardList.append(element);
    });
  });

  $('.lists').children('li').on("click", function($openedCard){
    var $openedCard = $(this);
    openCard($openedCard);
  });

  const openCard = function($openedCard){
    if ($('.firstOpen').length === 0) {
      $openedCard.addClass('firstOpen');
      return;
    }

    $('li').css('pointer-events', 'none');

    setTimeout(function(){
      compareCard($openedCard);
      $('li').css('pointer-events', '');
    }, 1000);
  };

  function compareCard($card){
    var $firstCard = $('.firstOpen'),
        $secondCard = $card,
        firstNum = $firstCard.data('num'),
        secondNum = $secondCard.data('num');

    $firstCard.removeClass('firstOpen');

    if(firstNum === secondNum){
      $firstCard.removeClass('unopened');
      $secondCard.removeClass('unopened');

      if($('.unopened').length === 0){
        alert("Game Over");
      }
    } else {
      closeCard($firstCard);
      closeCard($secondCard);
    }
  }
});
</script>
</body>
</html>

試したこと

$('.lists').children('li').on("click", function($openedCard){
var $openedCard = $(this);
openCard($openedCard);
});

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
上記の”試したこと”の部分について上のイベントと下の処理が分けた書き方にてどうすればうまくエラーが発生せずに神経衰弱を作成することができるか教えていただけると幸いです。

エラーコード

index.html:98 Uncaught SyntaxError: Identifier 'openCard' has already been declared

int32_t

2022/09/05 20:40

エラーが発生しているなら、エラーメッセージを質問文に含めてください。

take-1917.

2022/09/06 00:57

すみませんエラーコードも含めましたので、回答などいただけると幸いです。お手数おかけしております。申し訳ありません

行動規範の内容に同意します

回答1件

ベストアンサー

js
1  function openCard($card){
2    $card.css('pointer-events','none')
3         .text($card.data('num'));
4  }
5
6  ...
7
8  const openCard = function($openedCard){
9    if ($('.firstOpen').length === 0) {