質問編集履歴

1

内容の追記

2023/07/05 07:24

投稿

Mr_PONPON_MARU
Mr_PONPON_MARU

スコア35

test CHANGED
File without changes
test CHANGED
@@ -4,6 +4,9 @@
4
4
  作成するにあたり、[こちらのサイト](https://izadori.net/js-bootstrap-modal-dialog/)を参考にしました。
5
5
 
6
6
  ### ソースコード
7
+ 当方の理解では、プルダウンの項目(<a>タグ要素)をクリックした際にはonchangeイベントが発生し、モーダルダイアログの表示にはonclickイベントが必要だと認識しています。
8
+
9
+ 今回のようにプルダウンの項目クリックでモーダルを表示させる上で、モーダルダイアログを表示させるための非表示ボタンを設置しています。
7
10
  ```article_detail.html
8
11
  <ul class="navbar-nav">
9
12
  <li class="nav-item dropdown">
@@ -69,6 +72,12 @@
69
72
  また、ブラウザの検証ツールを確認してみたところ、コンソール画面では下記のようなメッセージが表示されました。
70
73
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-07-05/c3e93a42-3429-445d-8d26-61937ec0ae1b.png)
71
74
 
75
+ おそらく、```const onChange = (e) => {
76
+ if(e.target.value === "0"){
77
+ showModalButton.dispatchEvent(new Event("click"));
78
+ }
79
+ };```の部分がうまくいっていないのかと思われますが訂正方法を調べてもわかりませんでした。
80
+
72
81
  ### 試したこと
73
82
 
74
83
  ・プルダウンを解除し、リンククリックのみにしたところ正常にモーダルダイアログが表示されました。