Javascript 엘리먼트 선택방법 (1. getElementById)

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

 

HTML 코드

<section id ="section1">
        <h1>Ex1 : 엘리먼트 선택방법</h1>
        <div>
            <input id="txt-x" type="text" value="0" dir ="rtl">
            +
            <input id="txt-y" type="text" value="0" dir ="rtl">
            <input id="btn-add" type="button" value="=">
            <input id="txt-sum" type="text" value="0" dir ="rtl" readonly>
        </div>
</section>
<script src="selector.js">
 

자바스크립트 코드

// Ex1: 계산기 프로그램
window.addEventListener("load", function() {
    var txtX = document.getElementById("txt-x");
    var txtY = document.getElementById("txt-y");
    var btnAdd = document.getElementById("btn-add");
    var txtSum = document.getElementById("txt-sum");
 
    btnAdd.onclick = function () {
        var x = parseInt(txtX.value);
        var y = parseInt(txtY.value);
        txtSum.value= x + y;
    };
});
 

"load" 함수를 이용해 html이 모두 load 되었을 때 실행되게 한 후에 html 태그의 id값에 맞춰 객체를 읽어온다.

받아온 객체 btnAdd 클릭 하였을 때 txtX에 적힌 값과 txtY에 적힌 값을 숫자로 변환한 후에 더한 값을 txtSum.value를 통해 html input 창에 입력해준다.

 

결과화면