コメント入力時のSendgridによるメール送信について

[Sei_EL]

お世話になっております。Javascriptを用いたカスタマイズについてお伺いしたいことがあり、投稿させていただきます。

・やりたいこと
アプリのレコード詳細画面を開いた際に、コメントのタブを閉じた状態にすることと、コメント入力後にSendGridでメールを送信する処理を両立したい。

・現状
SendGridのプラグインを用いて、レコードに保存されているメールアドレスにメールを送る動作を行っています。（参考URL:kintone から SendGrid プラグインを利用してメール送信 #JavaScript - Qiita)
今はDOM操作を用いて、コメントを入力して保存されたタイミングで送るようにカスタマイズしています。
以上の動作が正常に機能している状況で、詳細画面を開いた際にコメント欄を閉じた状態にするプラグインを追加しました。（https://dx.japacom.co.jp/kintone-plugins/comment-hidden-plugin/）
すると、詳細画面を開くとコメント欄は閉じているのですが、コメントを書き込んだタイミングでのメール送信処理が動作しなくなりました。

・問題の箇所
ディベロッパーツールで確認すると、詳細画面を開いた際に
「show.js:145 Uncaught TypeError: Cannot set properties of null (setting ‘onclick’)」
というメッセージが表示されています。
後から入れたプラグインの関係か、元々あったコメントの「書きこむ」ボタンが存在しない状態になったことでエラーが出ていると思われます。

対策としてはコメント欄を開くボタンをDOM処理でつかみ、そのタイミングで「app.record.detail.show」
のタイミングで行っていた処理を行えばいいのではと考えているのですが、その方法がうまくいっておりません。

今の対策への改善案や他の対策等、ありましたら、教えていただけないでしょうか。

・現在のコード

//----------------------------------------------------------------
  // レコード詳細※コメント追加時にメールを送信
  //----------------------------------------------------------------
  kintone.events.on('app.record.detail.show', function(event) 
  {
    //window.alert("レコード詳細画面を開きました");
    
    // 書き込むボタンのクリックイベント
    document.querySelector('button.ocean-ui-comments-commentform-submit').onclick = function(){
   // 入力値取得
   var value = document.querySelector('.ocean-editor-seamless').textContent;

   //メール送信
   //window.alert(value);
    
   var records = event.record;
      var to_mailaddr = records['メールアドレス']['value'];
      var cc_mailaddr = records['追加通知アドレス']['value'];
      // メールアドレスが存在すれば送信する
      if( to_mailaddr !== undefined && to_mailaddr !== '' ){

      var subject = '[kintone][アプリ名] コメントが追加されました [' + records['タイトル']['value'] + ']';

      // body
      var textbody = '■コメント'+'\n'+ value;
                    
                  
     
      var sending = new kintone.Promise(function(resolve, reject) {
        // to, cc, bcc, mailFrom, subject, text, html, callback, errback
        kintonePlugin.sendgrid.sendMail(
          to_mailaddr, cc_mailaddr, null, 'sample@example.com,
          subject, textbody, null,
          function(resp) {
            resolve(event);
          }, function() {
            event.error = 'メール送信に失敗しました';
            reject(event);
          }
        );
      });
      return sending;
    }
    };

[aaa]

メールの送信先と思われるメールアドレスをマスクしませんか？
たとえば、 sample@example.comとか

[Sei_EL]

aaaさん

失念しておりました。指摘ありがとうございます。

[aaa]

kintone.events.on('app.record.detail.show', (event) => {
    document.addEventListener('click', function(event) {
        // クリックされた要素から親要素をたどる
        let targetElement = event.target;
        while (targetElement != null) {
            if (targetElement.classList && targetElement.classList.contains('ocean-ui-comments-commentform-submit')) {
                // ここに必要な処理を記述
                console.log(document.querySelector('.ocean-editor-seamless').textContent)
                break; // クラスが見つかればループを終了
            }
            targetElement = targetElement.parentElement; // 親要素に移動
    
        }
    });
})

'app.record.detail.show’が呼ばれたときにコメントを「書き込む」ボタンが存在しない場合の処理です。
コメントの内容がとれるところまでは確認しています。
ChatGPTによるコード生成です。

[Sei_EL]

aaaさん

回答ありがとうございます。
いただいたコードを元に一部変更して、書き込みボタンを押した際にメールアドレス等、sendgridのプラグイン実行に必要な値がエラーなく取得できることを確認できました。

実際にメールを送る動作はこれから確認の予定ですが、ネックになっていた箇所はクリアできました。

本当にありがとうございました。