3.Function

<div class="alert-box" id="alert-box">Alert 박스
        <button onclick="document.getElementById('alert-box').style.display = 'none';">닫기</button>
    </div>
    
    <button onclick="document.getElementById('alert-box').style.display = 'block';">버튼</button>

전 시간에 작성한 코드는 아주 길다

function을 사용하면 긴 코드를 깔끔하게 한 단어로 줄일 수 있다!

    <div class="alert-box" id="alert-box">Alert 박스
        <button onclick="close_box()">닫기</button>
    </div>

    <button onclick="open_box()">버튼</button>

                 //짓고싶은 이름
        function close_box() {
            //축약할 코드 작성
            document.getElementById('alert-box').style.display = 'none';
        }

        function open_box() {
            //축약할 코드 작성
            document.getElementById('alert-box').style.display = 'block';
        }

 

자주 겪는 버그

변경하고자 하는 html 요소를 위에 작성하고 그 하위에 script를 작성해야함

=> 브라우저가 문서를 위에서 아래로 읽어들이기 때문

 

에러메시지

uncaught TypeError : Cannot set property 'innerHTML' of null at ___
innerHTML을 수정하고 싶은데 그 값이 찾을 수 없음 

uncaught TypeError : document.getElementByid is not a function ___
존재하지 않는 함수 .getElementByid => .getElementById :대소문자,오타 확인