【Bootstrap】プルダウンの項目クリックでモーダルを表示させたい

実現したいこと

Bootstrap4系を用いて、プルダウンの項目をクリックすることでモーダルを表示させるようなフロントエンドを開発しています。
作成するにあたり、こちらのサイトを参考にしました。

ソースコード

当方の理解では、プルダウンの項目(<a>タグ要素)をクリックした際にはonchangeイベントが発生し、モーダルダイアログの表示にはonclickイベントが必要だと認識しています。

今回のようにプルダウンの項目クリックでモーダルを表示させる上で、モーダルダイアログを表示させるための非表示ボタンを設置しています。

article_detail.html

1<ul class="navbar-nav"> 2 <li class="nav-item dropdown"> 3 4 <!-- この画像をクリックすることでプルダウン項目表示 --> 5 <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 6 <img class="rounded-circle u-box-shadow-sm mr-2" width="25" height="25" src="{% static 'img/three_dots_icon.png' %}" alt="Icon"> 7 </a> 8 9 <!-- プルダウン項目 --> 10 <div class="dropdown-menu" id="menu" aria-labelledby="navbarDropdown"> 11 <a class="dropdown-item" data-toggle="modal" data-target="#commentModal" id="showModal">Edit</a> 12 <!-- モーダル用非表示ボタン --> 13 <button type="button" class="btn btn-primary invisible" id="showModal" data-toggle="modal" data-target="#commentModal"> 14 Invisible Trigger Button 15 16 <a class="dropdown-item" data-toggle="modal" data-target="#commentModal" id="showModal">Delete</a> 17 <!-- モーダル用非表示ボタン --> 18 <button type="button" class="btn btn-primary invisible" id="showModal" data-toggle="modal" data-target="#commentModal"> 19 Invisible Trigger Button 20 </button> 21 22 <!-- モーダルダイアログ --> 23 <div class="modal fade bd-example-modal-lg" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 24 <div class="modal-dialog modal-lg" role="document"> 25 <div class="modal-content"> 26 <div class="modal-header"> 27 <h5 class="modal-title" id="exampleModalLabel">Large Size</h5> 28 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 29 <span aria-hidden="true">&times;</span> 30 </button> 31 </div> 32 <div class="modal-body"> 33 ... 34 </div> 35 <div class="modal-footer"> 36 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 37 <button type="button" class="btn btn-primary">Save changes</button> 38 </div> 39 </div> 40 </div> 41 </div> 42 </div> 43 </li> 44</ul> 45 46-中略- 47 48<script type="text/javascript"> 49 const showModalButton = document.getElementById("showModal"); 50 const menu = document.getElementById("menu"); 51 const onChange = (e) => { 52 if(e.target.value === "0"){ 53 showModalButton.dispatchEvent(new Event("click")); 54 } 55 }; 56 menu.addEventListener("change", onChange); 57</script>

発生している問題・エラーメッセージ

プルダウン項目をクリックすると、画面がグレーアウトするところまでは良いのですが、モーダルダイアログがポップアップされません。

また、ブラウザの検証ツールを確認してみたところ、コンソール画面では下記のようなメッセージが表示されました。

おそらく、const onChange = (e) => { if(e.target.value === "0"){ showModalButton.dispatchEvent(new Event("click")); } };の部分がうまくいっていないのかと思われますが訂正方法を調べてもわかりませんでした。

試したこと

・プルダウンを解除し、リンククリックのみにしたところ正常にモーダルダイアログが表示されました。