javascript 코드 위치에 따른 오류

티스토리 뷰

코딩/오류 노트

javascript 코드 위치에 따른 오류

ehzim 2023. 11. 23. 23:47

- 이벤트 연결방식

1. html에서 js 연결 (=onclick)

2. js에서 html 연결 (=click)

(eventlistener 방식까지해서 3가지 방식이 있다.)

ex) 이벤트 연결방식 두가지를 사용하여 코드 작성 예시

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 이벤트</title>
    <Style>
        #desc{
            display: none;
        }
    </Style>
</head>
<body> 
    <div id="item">
        <img src="image/flower.jpg" alt="">
        <button class="over" id="open">상세 설명 보기</button>
        <div id="desc" class="detail">
            <h4>민들레</h4>
            <p>어디서나 매우 흔하게 보이는 잡초로서 바닥에 딱 붙어서 꽃봉오리 하나가 속 올라온다. 
                톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다.
            </p>
            <button id="close">상세 설명 닫기</button>
        </div>
    </div> 

    <script>
        var a = document.querySelector('#close');
        a.onclick=function(){
            hidedetail();
        }  //hidedetaul()만 넣으면 반환값만 주고 function()으로 위와같이 넣으면 hidedetail실행
        //그렇기때문에 밑에 hidedetail이란 이름을 가진 함수가 있어야 함수명만해서 실행 가능
    </script> 

</body>
<script src="view.js"></script>  
<!-- onload해야 <head>에 사용 가능하다. -->
</html>

document.getElementById('open').addEventListener('click',showdetail);

function showdetail(){
    document.querySelector('#desc').style.display="block";
    document.querySelector('#open').style.display="none";
}

function hidedetail(){
    document.querySelector('#open').style.display="block";
    document.querySelector('#desc').style.display="none";
}

결과

이벤트 연결방식 두가지를 사용하여 html과 javascript를 작성하였다.

첫번째 방식으로는 js에서 html(=click)으로 연결하는 방식을 사용하였다.

document.getElementById('open').addEventListener('click',showdetail);

function showdetail(){
    document.querySelector('#desc').style.display="block";
    document.querySelector('#open').style.display="none";
}

javascript에 작성을 하여 html로 연결하였다.

이때는 주의할 점이 있다.

js를 실행하기 위해 html에 실행하도록 연결시켜줘야하는데

위치에 따라 실행 순서가 다르기 때문에 주의해야한다.

만약 연결하는 명령어인 <script src="view.js"></script> 를 html 문보다 앞에 위치한다면 js가 먼저 실행되어 제대로 실행되지않는다.

그렇기 때문에 코드 위치를 </body> 이후에 작성하거나 window.onload 를 사용하여 정상적으로 실행되도록 한다.

window.onload는 html이 모두 로드 된 후 js가 실행되도록 한다.

두번째 방식으로는 html에서 js 연결 (=onclick) 방식을 사용하였다.

HTML

<script>
        var a = document.querySelector('#close');
        a.onclick=function(){
            hidedetail();
        }  
</script>

function hidedetail(){
    document.querySelector('#open').style.display="block";
    document.querySelector('#desc').style.display="none";
}

두번째 방식은 html에서 js 연결하도록 하였다.

이 방식 또한 알아야하는 주의사항이 있다.

위의 코드는 function hidedetai(){} 과 onclick이 각 각 js와 html에 작성되어 있다.

위와 같은 방식을 사용할때는 상관없지만

아래와 같은 방식을 사용할때는 문제가 발생한다.

<script>
        var a = document.querySelector('#close');
        a.onclick=hidedetail();
</script>

hidedetail()만 작성하면 반환값을 준다.

이와 같은 방식으로 사용할 시 hidedetail()함수가 같은 공간에 있어야 찾아 실행하여 반환값을 줄 수 있는데

만약 위의 방식처럼 JS에 따로 작성할 시 함수를 찾을 수 없어 실행되지 않는다.

문제점을 해결하고자한다면 아래와 같이 한 곳에 hidedetail도 작성되어야 정상적인 실행이 가능하다.

<script>
        var a = document.querySelector('#close');
        a.onclick=hidedetail();
        
        function hidedetail(){
  	  	document.querySelector('#open').style.display="block";
 		document.querySelector('#desc').style.display="none";
		}
        
</script>

저작자표시

'코딩 > 오류 노트' 카테고리의 다른 글

split & replace (1)	2023.11.28
addeventlistener (0)	2023.11.27
[7주 2일차] border사용 (1)	2023.11.21
[7주 2일차] 코드 수정 및 보충 (0)	2023.11.21
[7주 1일차] HTML CSS 코드 수정 (0)	2023.11.21

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

zim's growth dairy

티스토리 뷰