質問内容
提示コードの<!-- ここに置きました -->
ですがこの場所に提示コード下部のコード<!--########-->
部のコードを置いたのですが。プログラムは実行できdialog
タグがJavascript
を通して画面に表示されるのですがその後閉じるタグである<button
タグのクリックしても閉じません。しかし<!--########-->
の場所にコードを移動して実行すると閉じることができした。これなぜでしょうか?
知りたいこと
dialogタグのコードを置く場所の理由が知りたい
参考サイト
リファレンスサイト: https://developer.mozilla.org/ja/docs/Web/HTML/Element/dialog
script.js
var dialog = document.querySelector("dialog");
console.log(dialog?.close);
var btn_close = document.getElementById("modal_Close");
btn_close?.addEventListener('click',function()
{
console.log("close");
dialog!.open = false;
dialog?.close();
console.log("end");
},false);
/*########################################################################
# ポップアップウインドウを表示
##########################################################################*/
function PopUpWindow_Show()
{
dialog?.showModal();
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table>
<tr>
<th>2023</th>
<th>朝・午前 1</th>
<th>朝・午前 2</th>
<th>朝・午前 3</th>
<th>朝・午前 4</th>
<th>夜間・午後 1</th>
<th>夜間・午後 2</th>
<th>夜間・午後 3</th>
<th>夜間・午後 4</th>
</tr>
<tr>
<!-- 日付表示 -->
<td>
<div class="item">
<div><span>aaa</span></div>
<div><span>bbb</span></div>
<div style="border: none"><span>ccc</span></div>
</div>
</td>
<!-- 入力データ モーダルウインドウ -->
<td onclick="PopUpWindow_Show()">
内容
<!-- ここに置きました -->
</td>
</tr>
</table>
<!-- ############################################## -->
<dialog id="modalWindow">
<p>sample</p>
<button id="modal_Close">モードレスダイアログを閉じる</button>
</dialog>
<!-- ############################################## -->
<script type="text/javascript" src="script.js"></script>
</body>
</html>