[JavaScript] 어..? 이게 되네..?

좌) 본인 문풀 우) 모범답안

 

 

구구절절 TMI

처음에는 var area1 = document.getElementById("area1"); 과 area1.innerHTML 구문 모두를 사용했지만, 모범답안에서는 var area1 = document.getElementById("area1"); 구문이 따로 기술 되어 있지 않다는 걸 알게 되었다. 불필요한 구문인 것 같아서 내 코드에서는 삭제했는데, 한가지 의문점이 들었다. var area1 = document.getElementById("area1"); 기술 하지 않아도, 문제없이 출력된다.. (왜..?)그럼 area1.innerHTML이 있는 구문이 실행되지 않아야 하는 것 아닐까? 하지만 내 코드의 경우 area1.innerHTML만 기술했음에도 불구하고 정상적으로 작동이 된다.. ( 이게 더 불안하다 ..ㅎㅋ. 왜 .. 때문에 되는 것이지.. ? )

 

 

 

질문

var area1 = document.getElementById("area1"); 구문을 기술하지 않아도, area1.innerHTML 구문이 문제없이 출력됩니다. 

그 이유가 궁금합니다.

 

 

답변

 

 

전체코드 

    <h1>기본 문법 문제</h1>
    <h3>문제1. 다음 보기에 있는 텍스트 필드에 작성한 문자열의 길이를 알아올 수 있도록 구현하시오</h3>

    <fieldset>
        <legend>보기</legend>
        <input type="text" id="str1">
    </fieldset>

    <div id="area1" class="area"></div>

    <button onclick="test1();">확인하기</button>

    <script>
        function test1(){

            var area1 = document.getElementById("area1");
            var str1 = document.getElementById("str1");

            area1.innerHTML = "보기의 문자열 길이는 " + str1.value.length + "글자 입니다.<br>";

        }
    </script>