<script>
document.addEventListener('DOMContentLoaded', () => {
let currentValue
let tValue = 10
const select = document.querySelector('select')
const input = document.querySelector('input')
const span = document.querySelector('span')
const calculate = () => {
span.textContent = (currentValue * tValue).toFixed(2)
}
select.addEventListener('change', (event) => {
const options = event.currentTarget.options
const index = event.currentTarget.options.selectedIndex
tValue = Number(options[index].value)
calculate()
})
input.addEventListener('keyup', (event) => {
currentValue = Number(event.currentTarget.value)
calculate()
})
})
</script>
<body>
<input type="text"> cm =
<span></span>
<select>
<option value="10">mm</option>
<option value="0.01">m</option>
<option value="0.393701">inch</option>
</select>
</body>toFixed(2) : 소수점 두자리까지 나타냄(반올림)
options[index].value : string형이므로 Number()생성자를 호출하여 숫자로 변환 -> Number(options[index].value)
출처 : 혼자 공부하는 자바스크립트 (윤인성)
'JavaScript' 카테고리의 다른 글
| 자바스크립트#08 : 예외 처리 (0) | 2022.12.21 |
|---|---|
| 자바스크립트#07 : 문서 객체 모델 (0) | 2022.12.20 |
| 자바스크립트#06 : 객체 (0) | 2022.12.16 |
| 자바스크립트#05 : 함수 (0) | 2022.12.15 |
| 자바스크립트#04 : 반복문 (0) | 2022.12.14 |
댓글