반응형
index.html
<body>
<label id="countLabel">0</label>
<div id="btnContainer">
<button id="decreaseBtn">decrease</button>
<button id="resetBtn">reset</button>
<button id="increaseBtn">increase</button>
</div>
<script src="index.js"></script>
</body>
여기에서 decreaseBtn의 요소를 가지고 오고 싶다면,
decreaseBtn = document.getElementById("decreaseBtn");
index.js
그리고 decreaseBtn 버튼을 클릭시 어떠한 동작을 수행한다.
const decreaseBtn = document.getElementById("decreaseBtn");
const resetBtn = document.getElementById("resetBtn");
const increaseBtn = document.getElementById("increaseBtn");
const countLabel = document.getElementById("countLabel");
let count = 0;
decreaseBtn.onclick = function(){
count-- ;
countLabel.textContent = count;
}
반응형
'FrontEND > JavaScript' 카테고리의 다른 글
| 사용자가 입력한 값에 따라 출력하기 IF문사용 (0) | 2024.01.24 |
|---|---|
| 1~45숫자중에서 로또번호 만들기 (0) | 2024.01.24 |
| class 문법을 사용하면 상속 관계 (0) | 2023.04.16 |
| 프로토타입 기반의 상속 방법 (0) | 2023.04.16 |
| public, private, get,set (0) | 2023.04.16 |