モーダル画面を表示する直前に条件分岐をかけたい

Question

###実現したいこと
answer-buttonをクリックした際に、年齢と性別が設定されているなら/questionに画面遷移し、そうでなければ年齢と性別を設定するモーダル画面を表示させるようにしたいです。

###発生している問題
fetchしてきたデータを参照して分岐をかけ、年齢と性別が設定されていない場合にモーダルをターゲットする属性をボタンに追加するという処理を書いてみたのですが、ボタンを一度クリックしただけでは反応せず、二度目のクリックでモーダルが表示されるという状況です。

一度目のクリックでモーダル画面を表示させる良い方法はないでしょうか？

###該当するコード

<a class="btn btn-outline-secondary btn-home" role="button" id="answer-button">質問に回答する</a>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">年齢と性別を選択して下さい。</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="radio" name="gender" value="male" class="gender-inp">
        <label for="inq1">男性</label>
        <input type="radio" name="gender" value="famale" class="gender-inp">
        <label for="inq2">女性</label><br>
        <label>年齢</label>
        <select name="age" class="age-inp">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

const answerButton = document.getElementById('answer-button');

answerButton.addEventListener('click', () => {
  fetch('/user/json').then((response) => {
    response.json().then((result) => {
      const { user } = result;
      if (user.age && user.gender) {
        window.location.href = '/question';
      } else {
        answerButton.setAttribute('data-toggle', 'modal');
        answerButton.setAttribute('data-target', '#exampleModalCenter');
      }
    });
  });
});

Answer 1

answerButtonに属性をセットした後にクリックイベントを発火してみてはどうですか？

answerButton.setAttribute('data-toggle', 'modal');
answerButton.setAttribute('data-target', '#exampleModalCenter');
answerButton.click();

Comments

[maskmelon]

回答ありがとうございます。試してみたのですが、クリックイベントの内部でクリックイベントを発火させると無限ループになってしまうようです。。

[nekoniki]

失礼しました、では対象となるexampleModalCenterをそのまま表示させるのはどうでしょうか？
$(document.getElementById("exampleModalCenter")).modal()

[maskmelon]

うまく表示することができました。
助かりました。ありがとうございます。