[JS] 버튼을 누를 때마다 동적으로 변하는 페이지 만들기(숫자 증감)

산을넘는다 2020. 6. 21. 23:14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <style>

        #clickTable {
            border	: 3px solid red;
            width	: 400px;
            height	: 300px;
            text-align: center;
        }

        button {
            width: 80px;
            height: 60px;
            text-align: center;
        }

    </style>
    
    <script>
        window.onload = function () {
            let plusNow = 0;
            let plusNum = document.getElementById("plusNum");
            let plusClick = document.getElementById("plusClick");
            
            plusClick.onclick = function () {
            	
                plusNum.innerText = ++plusNow + "번 클릭";
                
            }
            
            let minusNow = 10;
            let minusNum = document.getElementById("minusNum");
            let minusClick = document.getElementById("minusClick");
            
            minusClick.onclick = function () {

                if(minusNow > 0) {
                	
                    minusNum.innerText = --minusNow + "번";
                    
                }
            }

        }

    </script>

</head>
<body>
	<table id="clickTable">
	    <tr>
	        <td id="plusNum">0번 클릭</td>
	        <td>
	            <button id="plusClick">클릭</button>
	        </td>
	    </tr>
	    <tr>
	        <td>
	            <button id="minusClick">숫자감소</button>
	        </td>
	        <td id="minusNum">10번</td>
	    </tr>
	</table>

</body>
</html>