-
Javascript - 카운터 어플리케이션 예제Javascript 2020. 9. 6. 17:36
HTML
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Counter App</title> </head> <body> <h2 id="number" style="color:#f020f1;">0</h2> <div> <button id="increase">+1</button> <button id="decrease">-1</button> </div> <script src="html과 연동.js"></script> </body> </html>JS
const number = document.getElementById('number'); const increase = document.getElementById('increase'); const decrease = document.getElementById('decrease'); console.log(number.innerText); console.log(increase.offsetTop); // top 위치 알수 있음 console.log(decrease.id); increase.onclick = () => { // parseInt 정수형으로 변환, 뒤에 파라미터는 몇 진수로 할 것인지 const current = parseInt(number.innerText, 10); number.innerText = current + 1; } decrease.onclick = () => { const current = parseInt(number.innerText, 10); number.innerText = current - 1; }아이디가 없을 때, 태그이름으로 불러올 때
const number = document.getElementById('number'); const buttons = document.querySelectorAll('button'); const [increase, decrease] = buttons; console.log(buttons);'Javascript' 카테고리의 다른 글
Javascript - 다국어 변환 (0) 2020.09.16 Javascript - 모달 만들기 (0) 2020.09.06 Javascript - Promise all, Promise.race (0) 2020.09.06 Javascript - async / await (0) 2020.09.06 Javascript - Promise (0) 2020.09.06