• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

질문드립니다.

20.12.24 21:52 작성 조회수 110

0

안녕하세요 강사님 강의재밌게 잘 듣고 있습니다.

질문이 있는데요, 자바스크립트(애니매이션)를 html head부분에 넣을때 오류가 나는데

다음과 같습니다.

답변주시면 감사하겠습니다.

좋은 하루 되세요.

답변 1

답변을 작성해보세요.

0

<script>가 삽입된 위치가 <svg>의 위치보다 윗줄에 있기 때문에 발생하는 에러입니다.
html 문서는 위부터 아래로 순차적으로 읽어들이기 때문에 스크립트로 svg 엘리먼트에 접근하려는 시점에는 문서가 아직 svg 객체를 로드하지 못했기 때문에, null 값이 나오는 거랍니다.

<script>를 <head>에서 사용하시려면
window.addEventListener('load', () => {
    // 여기에 svg 접근 코드 작성
});

또는

window.addEventListener('DOMContentLoaded', () => {
    // 여기에 svg 접근 코드 작성
});

이런 식으로 문서의 로딩이 완료된 후 접근하거나,
<script> 위치를  <svg> 이후에 넣어주시면 됩니다.

<body>
    <svg>...</svg>
    <p>dd</p>
    .......
    <script></script>
</body>

이렇게요^^