develope_kkyu

[JAVASCRIPT] 계산기 만들기 본문

FrontEnd/JAVASCRIPT

[JAVASCRIPT] 계산기 만들기

developekkyu37 2022. 12. 22. 12:01
728x90

getElementById 이용

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>계산기</title>
    <script src="./JS/Calc_01.js"></script>
</head>
<body>
    <input type="text" id="txt1" value="0" />
    +
    <input type="text" id="txt2" value="0" />
    <input type="button" id="add" value="=" />
    <input type="text" id="sum" value="0" />
</body>
</html>

.js

window.addEventListener("load", function(){
    let btnAdd = window.document.getElementById("add");
    btnAdd.onclick = function(){
        let x,y;
        x = parseInt(document.getElementById("txt1").value);  
        y = parseInt(document.getElementById("txt2").value);     
        sum.value = x+y;     
    }
});

querySelector 이용

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>계산기 querySelector</title>
    <script src="./JS/Calc_04.js"></script>
</head>
<body>
    <section id="section1">
        <input type="text" id="txt1" value="0" />
        +
        <input type="text" id="txt2" value="0" />
        <input type="button" id="add" value="=" />
        <input type="text" id="sum" value="0" />
    </section>
</body>
</html>

.js

window.addEventListener("load", function(){
    let btn = document.querySelector("#add");
    btn.onclick = function(){
    let section = document.querySelector("#section1");
    let inputX = section.querySelector("#txt1");
    let inputY = section.querySelector("#txt2");

    console.log(inputX);
    console.log(inputX.value);

    let x,y;
    x=parseInt(inputX.value);
    y=parseInt(inputY.value);
    
    sum.value = x+y;
    }
});

--

728x90

'FrontEnd > JAVASCRIPT' 카테고리의 다른 글

[JAVASCRIPT] 드래그해서 원 옮기기  (0) 2022.12.22
[JAVASCIPT] 이벤트 박스 클릭해서 옮기기  (0) 2022.12.22
[JAVASCRIPT] Dom 체크박스 관리  (0) 2022.12.22
[JAVASCRIPT] Dom Node 관리  (0) 2022.12.22
[JAVASCRIPT] JSON Parse  (2) 2022.12.22
'FrontEnd/JAVASCRIPT' Related Articles more