[JavaScript] simple Counter
2023. 7. 3. 15:00ㆍTip
728x90
 |
 |
텍스트
더보기
<!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>Week 9: Counter</title>
<script>
const counter_id = "counter"
let counter_element = null
// 삽입
// document.write()로 body 태그 직접 수정
const func_insert = () => {
let content =
`<h1>${counter_id.toUpperCase()}</h1>
<hr>
<table>
<tr>
<td style="text-align: center;">
<p id="${counter_id}" style="font-size: 30px;">0</p>
</td>
</tr>
<tr>
<td>
<button onclick="func_update(document.getElementById('${counter_id}'), +1)">증가</button>
<button onclick="func_update('${counter_id}', -1)">감소</button>
<button onclick="func_update(counter_element, Number.NEGATIVE_INFINITY)">초기화</button>
</td>
</tr>
</table>`
document.write(content)
// 코드가 동적으로 삽입되기 때문에
// 이 시점부터 element 할당이 가능하다
counter_element = document.getElementById(counter_id)
}
// 수정
// 특정 태그의 event로 등록된 callback 함수의 형식
const func_update = (element, digit) => {
if (element.innerText == null) element = document.getElementById(element)
if (element.innerText == null) element = document.getElementById('counter')
let counter_value = Number(element.innerText) + digit
element.innerText = counter_value > 0 ? counter_value : 0
}
</script>
</head>
<body onload="func_insert()">
</body>
</html>728x90
'Tip' 카테고리의 다른 글
| [Win11] Administrator 계정 활성화 (0) | 2023.07.07 |
|---|---|
| [Java] Singleton Pattern using synchronized (0) | 2023.07.04 |
| [JavaScript] 키보드 입력에 따른 event 처리 (0) | 2023.07.03 |
| [MacOS/zsh] get internal ip from console (0) | 2023.06.29 |
| [MacOS] STS3 Spring setting with Eclipse 4.21 (0) | 2023.06.15 |