JavaScriptの反応が悪い window.confirmが一回で閉じません。

Question

GoogleAppsScriptとJavaScriptで以下の勤怠管理フォームを作ってみました。

出勤などのボタンをクリックすると確認のウインドウが表示されるようにしました。

ここからが問題です。
OK又はキャンセルを押しても一度でウィンドウが閉じません。
大体、平均で3回か4回程度どちらを押してもウインドウが再表示されます。

コードを以下に記載致します。

<script type="text/javascript">
function paid_Tarou(){
var btn = document.getElementById('btn_Tarou');
btn.addEventListener('click', function() {
var result = window.confirm('【山田太郎】の有給登録で間違いないですか。');

if( result ) {
google.script.run
.paid_Tarou(document.forms['form_Tarou'].elements['date'].value);
}
else {
console.log('キャンセルがクリックされました');
}})}
</script>

<script type="text/javascript">
function clickBtn_Tarou_Attendance(){
  var btn = document.getElementById('btn_Tarou_Attendance');
　btn.addEventListener('click', function() {
  var result = window.confirm('【山田太郎】が出勤で間違いないですか。');

  if( result ) {
  google.script.run.clickBtn_Tarou_Attendance();
  }
  else {
    console.log('キャンセルがクリックされました');
  }
})
}
</script>

<script type="text/javascript">
function clickBtn_Tarou_leaving(){
  var btn = document.getElementById('btn_Tarou_leaving');
　btn.addEventListener('click', function() {
  var result = window.confirm('【山田太郎】が退勤で間違いないですか。');
    
  if( result ) {
  google.script.run.clickBtn_Tarou_leaving();
  }
  else {
    console.log('キャンセルがクリックされました');
  }
})
}
</script>

考えられる原因として、google.script.runの処理に時間を要してウインドウが再表示されてしまっていると思います。

しかし、解決策が思いつかず質問させていただきました。
このような場合、ウインドウを一度で閉じる方法は無いのでしょうか。

ご回答お待ちしております。

<p style="font-size:40px;font-weight:900;text-align:center">★山田太郎</p>

<div class="button12">
  <a id="btn_Tarou_Attendance" onclick="clickBtn_Tarou_Attendance();">👉出勤</a>　　
  <a id="btn_Tarou_leaving" onclick="clickBtn_Tarou_leaving();">👈退勤</a>
</div>

<p style="font-size:20px;font-weight:900;text-align:center">ー有給取得登録欄ー</p>

<p></p>
<div id="parent">
<form name="form_Tarou">
<p></p>
<input name="date" type="date" />
<p></p>
</form>
</div>

<div id="btn">
<input type="button" value="登録" onclick="paid_Tarou()" id="btn_Tarou">
</div>

Comments

[m.ts10806]

確認されたブラウザと、その他のブラウザではどうだったか追記してください

[aRyo]

Google ChromeとMicrosoft Edgeで試しましたが、同じ症状でした。

[Lhankor_Mhy]

HTMLをご提示ください。

[aRyo]

HTML部分追加しました。
よろしくお願いいたします。

Answer 1

onclickイベントハンドラの中で、addEventListenerを実行していることが問題です。

このコードですと、クリックするたびにクリック時の処理が増えることになります。

Comments

[aRyo]

回答ありがとうございます。
以下で問題なく出来ました。

if(window.confirm('【000】が出勤で間違いないですか。')){

google.script.run.clickBtn_Horie_Attendance();

}
// 「OK」時の処理終了

// 「キャンセル」時の処理開始
else{

window.alert('キャンセルされました'); // 警告ダイアログを表示

}
// 「キャンセル」時の処理終了

[Lhankor_Mhy]

お役に立てたようで何よりです