제작 전 생각하자!
- innerHTML을 사용하여 element의 내부사항을 조작했을 시 모든 프로퍼티가 날라가게 되므로,
프로퍼티를 재설정해주어야 함. - 반복하여 사용하기 위해서는 함수의 기능을 이용해야 함.
- 재귀적 용법에 대해 상기해보자.
나의 답)
아래는 start 버튼과 cancel 버튼을 나누어서 조작하는 방식이다.
답지와는 다른 나만의 정답이지만, 나름 합리적으로 만들었다고 생각한다.
직관적이기 때문이다.
<div class="display">
</div>
<script>
const div = document.querySelector('.display')
const start = () => {
div.innerHTML = `
<input type="text">
<button class="cancel">Cancel</button>
`
const cancelButton = document.querySelector('.cancel')
cancelButton.onclick = cancel
}
const cancel = () => {
div.innerHTML = `
<button class="start">Start</button>
`
const startButton = document.querySelector('.start')
startButton.onclick = start
}
cancel()
</script>답지)
함수를 하나로 만들어 모든 기능을 구현하였다.
<div class="display">
</div>
<script>
const div = document.querySelector('.display')
const start = () => {
div.innerHTML = `
<button class="start">Start</button>
`
const startButton = document.querySelector('.start')
startButton.onclick = () => {
div.innerHTML = `
<input type="text">
<button class="cancel">Cancel</button>
`
const cancelButton = document.querySelector('.cancel')
cancelButton.onclick = start
}
}
start()
</script>