Javascript 엘리먼트 선택방법 (2. getElementById 개선하기)

getElementById 함수를 사용한 HTML 엘리먼트 선택방법 개선하기

Javascript 엘리먼트 선택방법 (1. getElementById) 에서 보다 명확하게 아이디 값을 읽어온다.

html코드

<section id ="section2">
        <h1>Ex2 : 엘리먼트 선택 개선방법</h1>
        <div>
            <input class="txt-x" type="text" value="0" dir ="rtl">
            +
            <input class="txt-y" type="text" value="0" dir ="rtl">
            <input class="btn-add" type="button" value="=">
            <input class="txt-sum" type="text" value="0" dir ="rtl" readonly>
        </div> 
</section>
 

js코드

//Ex2 : 엘리먼트 선택방법 개선하기 
window.addEventListener("load", function() {
    var section2 = document.getElementById("section2");
    var txtX = section2.getElementsByClassName("txt-x")[0];
    var txtY = section2.getElementsByClassName("txt-y")[0];
    var btnAdd = section2.getElementsByClassName("btn-add")[0];
    var txtSum = section2.getElementsByClassName("txt-sum")[0];
 
    btnAdd.onclick = function () {
        var x = parseInt(txtX.value);
        var y = parseInt(txtY.value);
        txtSum.value= x + y;
    };
});
 

 

getElementsByClassName() 함수는 html 태그에서 클래스이름을 불러왔을 때 몇 번째 항목인지 지정을 해줘야 하기 때문에 뒤에 배열 값을 붙여줘야합니다. 

첫번째 글(1. getElementById 엘리먼트 선택방법) 과 다르게 section의 값을 getElementById로 읽어와 보다 명확하게 section2아래 있는 항목들의 값을 지정해 읽어왔습니다. 

 

실행결과