日常 debug 紀錄 - HTML Section magic?

背景

這幾天在寫高中資訊社的網頁中遇到的問題，卡了 2 小時之久.. 所以來記錄一下:D

問題描述

<script>
	function showPopout(memberId) {
		console.log("showPopout function called with memberId:", memberId);
		document.getElementById('popout').style.display = 'flex';
		const memberInfos = document.getElementsByClassName('member-info');
		for (let info of memberInfos) {
			info.style.display = 'none';
		}
		document.getElementById(memberId).style.display = 'block';
	}

	function hidePopout() {
		document.getElementById('popout').style.display = 'none';
	}
</script>

簡單來說就是因為把 Popout Window 這個 div 放到 Section 外，導致就算 onclick() 經測試有成功觸發 console.log()，也印出 memberId ，但還是沒有成功彈出視窗。

<!-- Popout Window -->
<div id="popout" class="popout" style="display: none;">
	<div class="popout-content">
		<span class="close" onclick="hidePopout()">&times;</span>
		<% for (let member of site.data.members.member) { %>
		<div id="<%= member.id %>" class="member-info" style="display: none;">
			<div class="member-top">
				<img src="<%= member.img %>" alt="<%= member.name %>">
				<h2><%= member.name %></h2>
				<h5><%= member.level %>級 <%= member.position %></h5>
			</div>
			<div class="member-bottom">
				<h5>常用暱稱： </h5>
				<h5>升學管道： </h5>
				<h5>目前就讀： </h5>
				<h3>聯絡方式</h3>
				<% if (member.customContent) { %>
				<p><%= member.customContent %></p>
				<% } %>
			</div>
		</div>
		<% } %>
	</div>
</div>

<section id="members">
    <div class="container">
        <h1>歷屆社員</h1>
        <div class="member-box">
            <% for (let member of site.data.members.member) { %>
            <div class="namecard" onclick="showPopout('<%= member.id %>')">
                <img src="<%= member.img %>" class="head-img"/>
                <h2><%= member.name %></h2>
                <h5><%= member.level %> 級 <%= member.position %></h5>
            </div>
            <% } %>
        </div>
    </div>
    <!-- Popout Window Correct Placement -->
    <!--               ...               -->
    <!-- ============  END  ============ -->
</section>
<!-- Popout Window Incorrect Placement -->
<!--                ...                -->
<!-- ============   END   ============ -->

問題發現

測試完 console.log() 後，一臉矇逼，不知道為啥會這樣搞我..
後來慢慢打開 F12 手改 HTML 和 CSS 後才發現，應該不是 JS 觸發的問題，而是彈出視窗根本顯示不出來。

這時在猜，可能是圖層之類的問題，所以回去更仔細觀察 div 之間的關係，就被我看到 Popout Window 沒有在 Section 裡面！

果斷地改掉然後重新跑起來刷新，鬆了一大口氣… 終於彈出來了 Orz

問題釐清

待補… 微積分要讀不完了