3.기능

<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>

저번에 작성한 코드가 너무 길어서

기능사용 긴 코드를 정리하는 단어줄일 수 있습니다!

    <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 요소를 작성하고 아래에 스크립트를 작성하십시오.

=> 브라우저가 문서를 엽니다 위에서 아래로 읽기 왜냐하면

에러 메시지

잡히지 않은 TypeError: 속성 ‘innerHTML’은 ___에서 null로 설정할 수 없습니다.
innerHTML을 변경하고 싶은데 그 값을 찾을 수 없습니다.

잡히지 않은 TypeError : document.getElementByid는 함수가 아닙니다 ___
기능이 존재하지 않습니다 .getElementByid => .getElementById:대소문자 및 오타 확인