JAVASCRIPT- Selector API

html

<section id = "section3">
        <h1>Ex3: Selectors API Level1</h1>
        <div>
            <input name ="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>

// Ex3: Selectors API Level1
window.addEventListener("load",function(){
    var section3 = document.getElementById("section3");
    var txtX = section3.querySelector("input[name='x']");
    var txtY = section3.querySelector(".txt-y");
    var btnAdd = section3.querySelector(".btn-add");
    var txtSum =section3.querySelector(".txt-sum");

    btnAdd.onclick =  function(){
        var x = parseInt(txtX.value);
        var y = parseInt(txtY.value);
        
        txtSum.value = x+y;

    };
});

name 을 지정해서 쓸수도있고 class로도 사용할수있다.