クリックイベントの処理が完了次第、特定の処理を行いたい。

Question

実現したいこと

クリックイベントの処理が完了次第、特定の処理を行いたい。

前提

TypeScriptで機能の作成を行っています。
クリックイベントを設定しており、そのイベントの処理が完了次第、特定の処理を行いたいと考えています。
具体的には、
１，クリックがあったタイミングで検索が開始。
２，対象のレコードの情報（ラジオボタンのステータス）を取得し、そのラジオボタンのinnerTextを表示する。
という流れを想定しているのですが、クリックイベントの中にすべての処理を入れたところ、一気に処理が走っているようで前回の検索結果のラジオボタンのinnerTextを表示してしまいます。

（KINTONE・フォームブリッジ・kviewerを使用しているため、「fb.getElementByCode('kviewer_lookup')」という要素の取得をしております。）

該当のソースコード

  // ステータスを確認 ボタンを押下すると、kviewerの検索が開始
  document.getElementById('seach').addEventListener('click', function() {
    fb.getElementByCode('kviewer_lookup').getElementsByTagName('button')[0].click();

    let radioCheckedTextContent = document.createElement('p');
    radioCheckedTextContent.className = 'status-text';
    // すでにステータスの表示がある場合、削除
    let statusContent = document.getElementsByClassName('status-text');
    for (let i = 0; i < statusContent.length; i++) {
      let e = statusContent[i];
      if (e) {
        e.parentNode.removeChild(e);
      }
    }

    
    let radioElement = document.getElementsByClassName('el-radio radio');
    let radioCheckedText = '';
    for(let i = 0; i < radioElement.length; i++){
      if(radioElement[i].className == 'el-radio radio is-checked'){
          console.log(radioElement[i].children[1].innerText);
          radioCheckedText = radioElement[i].children[1].innerText;
          break;
      }else{
        radioCheckedText = 'ステータスはまだありません';
      }
     }

    //  申請者ステータスのテキストを「ステータスを確認」ボタンの横に追加
     radioCheckedTextContent.textContent= radioCheckedText;
     console.log(radioCheckedTextContent.textContent);
     document.getElementsByClassName('column el-form-item field')[0].appendChild(radioCheckedTextContent);
  })

試したこと

コールバック関数を使用すればいいのかと、「// 申請者ステータスで、チェックの入った値を取得する」以降の処理をイベントの外に出し、違う関数に入れ引数として渡してみましたがうまくいきませんでした。（そもそもの使い方が誤っているかもしれません）

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

KINTONE・フォームブリッジ・kviewerを使用してページを作成しております。

Comments

[yambejp]

fb.getElementByCode('kviewer_lookup').getElementsByTagName('button')[0]
をクリックしたあとどのような挙動をそうていしているのでしょうか？
ページの遷移をするなら制御できないですし、そうではなくなんらかの非同期の処理を
発生させるならその挙動が確認できません

[sky23]

コメント有難うございます。
ページ遷移は想定しておりません。
希望の挙動としては下記になります。
--------
あるボタンをクリックすると、DBから対象のレコードを取得し、対象レコードの「ステータスを管理するラジオボタン」からチェックが入っている箇所のinnerTextを取得して、画面上に表示したい。
--------
今の記述のままでは、その前に検索した結果のinnerTextを取得してしまうようで困っております。どなたかのお知恵を借りられればと投稿しました。
（この内容で回答の趣旨は合っていますでしょうか。違いましたらご指摘下さい。）

[yambejp]

#searchをクリックするとなんかのボタンを押す仕様ですよね？
そのボタンを押したときにどういった挙動があるかがわからないのでなんとも言えないというコメントです。
XHR(ajax/fetch)の記載がみあたらないので非同期でapiから何かを受け取っているようにも見えません

[sky23]

失礼しました。
#searchボタンをクリックすると「kviewer」というシステムの「kviewer_lookup」という検索ボタンを押す。という仕様になっております。
本来の検索ボタンはこちらになるのですが、「kviewer」というシステムでデフォルトで用意されているボタンで、このボタンをユーザに押させたくなくて違うボタンを作っております。
私が作ったボタンを押すと、「kviewer」というシステムの検索ボタンが押される。という動作を期待して書いております。
KINTONE、フォームブリッジ、kviewerというシステムを使用しているので、勝手に検索が走るようになっております。

[yambejp]

おそらくAIの回答しているpromiseで処理を待つという仕様に集約するとはおもいますが、kviewerがどういう非同期処理なのか次第ですね。apiからの戻り値を受け取った時点で次の処理に入るのか、受け取ったあとDOMを再構築した上で次の処理に入るのかkviewer次第という感じです

[sky23]

ご返信が遅くなり申し訳ありません。
promiseで処理の完了を待つ仕様に変えようと思います。修正しては動作を確かめているんですが、なかなかうまくいきません。引き続きチャレンジしようと思います。
取り急ぎ、お礼申し上げます。有難うございました。

Answer 1

この回答はGPT-4による自動生成回答です

クリックイベントの処理が完了するのを待つためには、Promiseを使用するか、async/awaitを使用する方法があります。

以下にasync/awaitを使用した例を示します。

// ステータスを確認 ボタンを押下すると、kviewerの検索が開始
document.getElementById('seach').addEventListener('click', async function() {
  fb.getElementByCode('kviewer_lookup').getElementsByTagName('button')[0].click();

  // 検索が終わるまで待つ
  await new Promise(resolve => setTimeout(resolve, 1000));

  let radioCheckedTextContent = document.createElement('p');
  radioCheckedTextContent.className = 'status-text';
  // すでにステータスの表示がある場合、削除
  let statusContent = document.getElementsByClassName('status-text');
  for (let i = 0; i < statusContent.length; i++) {
    let e = statusContent[i];
    if (e) {
      e.parentNode.removeChild(e);
    }
  }

  let radioElement = document.getElementsByClassName('el-radio radio');
  let radioCheckedText = '';
  for(let i = 0; i < radioElement.length; i++){
    if(radioElement[i].className == 'el-radio radio is-checked'){
        console.log(radioElement[i].children[1].innerText);
        radioCheckedText = radioElement[i].children[1].innerText;
        break;
    }else{
      radioCheckedText = 'ステータスはまだありません';
    }
  }

  //  申請者ステータスのテキストを「ステータスを確認」ボタンの横に追加
  radioCheckedTextContent.textContent= radioCheckedText;
  console.log(radioCheckedTextContent.textContent);
  document.getElementsByClassName('column el-form-item field')[0].appendChild(radioCheckedTextContent);
})

このコードでは、setTimeoutを使用して1秒待つようにしていますが、検索が終わるまでの時間によって調整してください。

ただし、この方法はあくまで一時的な解決策であり、検索が終わるまでの正確な時間を知ることができないため、最適な解決策ではありません。検索が終わったことを検知するイベントがあれば、そのイベントを使用するのが最適です。