w3-include-html 요소 querySelector로 요소 찾기

header와 footer처럼 웹페이지에서 공통적으로 사용하는 UI는 재사용 가능하게 구성하려고 w3-include-html을 사용했다.

<header w3-include-html="./common/header.html"></header>

 

그리고 header는 아래와 같이 구성했다.

<h1>
  <a href="./index.html"><span class="hide">로고명</span></a>
</h1>
<nav>
  <ul>
    <a href="./introduce.html">
      <li>회사소개</li>
    </a>
    <a href="#">
      <li>제품소개</li>
    </a>
  </ul>
</nav>
<div class="hamburger">
  <button id="ham"></button>
</div>

 

여기서 ham의 버튼을 js에서 querySelector로 불러올 때 문제가 발생했다. 평범한 window.onLoad로는 w3-include-html로 불러온 요소를 찾을 수 없었다. w3.includeHTML()이 실행된 후 HTML이 비동기적으로 로드되어서 그렇다고 한다.

​

해결방법은

1. html코드의 head에 다음 코드 추가

<script src="https://www.w3schools.com/lib/w3.js"></script>

 

2. w3.includeHTML() 후에 실행되도록 콜백함수 사용

function loadHeaderAndInit() {
  w3.includeHTML(() => {
    const ham = document.querySelector("#ham");

    function onClickButtonHam() {
      // 로직 추가
    }

    ham.addEventListener("click", onClickButtonHam);
  });
}

// 페이지 로드 후 실행
window.onload = loadHeaderAndInit;

---

2단 반응형 홈페이지를 개발중인데,, CSS 놓은지 너무 오래돼서 어렵다...