Javascript 입력 양식을 사용한 예제
입력 양식에다가 할 일을 적은 후 추가하기 버튼을 클릭하면 할 일이 추가된다
각 일 앞에는 체크박스가 있고 체크박스를 선택하면 글자에 취소선이 그어진다
각 일 옆에는 제거하기 버튼이 있고 버튼을 누르면 일이 제거된다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const h1 = document.createElement('h1')
h1.textContent = '할 일 목록'
document.body.appendChild(h1)
const input = document.createElement('input')
document.body.appendChild(input)
const addButton = document.createElement('button')
document.body.appendChild(addButton)
addButton.textContent = '추가하기'
addButton.addEventListener('click', () => {
if (input.value !== ''){
const div = document.createElement('div')
document.body.appendChild(div)
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.addEventListener('change', () => {
if(checkbox.checked){
div.style.textDecoration = 'line-through'
} else {
div.style.textDecoration = ''
}
})
div.appendChild(checkbox)
const span = document.createElement('span')
span.textContent = input.value
input.value = ''
div.appendChild(span)
const deleteButton = document.createElement('button')
deleteButton.textContent = '제거하기'
deleteButton.addEventListener('click', () =>{
div.parentNode.removeChild(div)
})
div.appendChild(deleteButton)
} else {
alert('내용을 입력해주세요')
}
})
})
</script>
</head>
<body>
</body>
</html>
할 일을 적은 후 Enter를 눌렀을 때도 입력이 되게 하려면 input에
이벤트 리스너를 해야한다
그럼 일을 추가하는 코드를 두번 써야하니 일을 추가하는 코드를 함수로 만들자
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const addTodo = () => {
if (input.value !== ''){
const div = document.createElement('div')
document.body.appendChild(div)
const checkbox = document.createElement('input')
checkbox.type = 'checkbox'
checkbox.addEventListener('change', () => {
if(checkbox.checked){
div.style.textDecoration = 'line-through'
} else {
div.style.textDecoration = ''
}
})
div.appendChild(checkbox)
const span = document.createElement('span')
span.textContent = input.value
input.value = ''
div.appendChild(span)
const deleteButton = document.createElement('button')
deleteButton.textContent = '제거하기'
deleteButton.addEventListener('click', () =>{
div.parentNode.removeChild(div)
})
div.appendChild(deleteButton)
} else {
alert('내용을 입력해주세요')
}
}
const h1 = document.createElement('h1')
h1.textContent = '할 일 목록'
document.body.appendChild(h1)
const input = document.createElement('input')
document.body.appendChild(input)
input.addEventListener('keyup', (event) => {
const Enter = 13
if (event.keyCode == Enter){
addTodo()
}
})
const addButton = document.createElement('button')
document.body.appendChild(addButton)
addButton.textContent = '추가하기'
addButton.addEventListener('click', () => {
addTodo()
})
})
</script>
</head>
<body>
</body>
</html>참고로 Enter 의 키 코드는 13 이다
위 처럼 addTodo라는 함수를 만들면 코드가 깔끔해진다
성장을 보여주는 기록