글자 입력 양식 이벤트
입력양식이란? 사용자로부터 어떠한 입력을 받을 때 사용하는 요소.
HTML에서는 input, textarea, Button, select 등이 입력양식이다.
input
<!DOCTYPE html>
<html lang="ko">
<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>HTML_STUDY</title>
<style>
input {
width: 300px;
}
</style>
</head>
<body>
<h1>Welcome to Study!</h1>
<p>cm 를 m 로 변환하기</p>
<input class="changeCm" type="number" placeholder="변환하고자 하는 cm를 적어주세요.">
<button class="cmButton">변환</button>
<p class="valueCm"></p>
<script>
const changeCm = document.querySelector(".changeCm");
const cmButton = document.querySelector(".cmButton");
const valueCm = document.querySelector(".valueCm");
function changeEvent() {
valueCm.innerText = `${changeCm.value}cm의 변환값은 ${changeCm.value/100}m입니다.`
changeCm.value = "";
}
cmButton.addEventListener('click', changeEvent)
</script>
</body>
</html>위와 같은 방식으로 input요소로부터 입력을 받아 숫자를 변환시키는 작업을 할 수 있다.
select
이를 활용해 여러 숫자변환을 드롭다운 형식으로도 구현할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<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>HTML_STUDY</title>
<style>
input {
width: 300px;
}
</style>
</head>
<body>
<h1>Welcome to Study!</h1>
<p>cm를 변환시켜보자 (소수점 둘째 자리까지만 출력)</p>
<input class="changeCm" type="number" placeholder="변환하고자 하는 cm를 적어주세요.">
<br />
<select id="selectChange">
<option>---선택---</option>
<option>미터</option>
<option>킬로미터</option>
<option>인치</option>
</select>
<p class="valueCm"></p>
<script>
const changeCm = document.querySelector(".changeCm");
const valueCm = document.querySelector(".valueCm");
const selectChange = document.querySelector("#selectChange");
selectChange.addEventListener('change', (event)=>{
const options = event.target.options;
const index = event.target.options.selectedIndex;
if (index == 0) {
valueCm.innerText = "";
}
else if (index == 1) {
valueCm.innerText = `${changeCm.value}cm의 변환값은 ${(changeCm.value/100).toFixed(2)}m 입니다.`
}
else if (index == 2) {
valueCm.innerText = `${changeCm.value}cm의 변환값음 ${(changeCm.value/100000).toFixed(2)}km 입니다.`
}
else if (index == 3) {
valueCm.innerText = `${changeCm.value}cm의 변환값음 ${(changeCm.value/2.54).toFixed(2)}inch 입니다.`
}
})
</script>
</body>
</html>위와 같이 select박스를 이용하여 변환값을 출력 할 수 있다. 또한 toFixed메소드를 통해 소수점을 둘째자리까지 출력할 수 있도록 적용하였다.
checkbox
<!DOCTYPE html>
<html lang="ko">
<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>HTML_STUDY</title>
</head>
<body>
<h1>Welcome to Study!</h1>
<p>checkBox 사용하기</p>
<input class="inputCheck" type="checkbox"><span>타이머 활성화</span>
<p class="timerOutput"></p>
<script>
const inputCheck = document.querySelector(".inputCheck");
const timerOutput = document.querySelector(".timerOutput");
let [timer, timerId] = [0, 0]
inputCheck.addEventListener('change', (event) => {
if(event.target.checked){
timerId = setInterval(()=>{
timer += 1;
timerOutput.textContent = `${timer}초`
}, 1000)
}
else{
clearInterval(timerId)
}
})
</script>
</body>
</html>위 코드를 이용하여 체크박스가 checked되었을경우 setInterval에 의해 시간이 지나게 하고, checked가 풀릴경우 clearInterval로 시간을 멈추게 한다.
radiobutton
<!DOCTYPE html>
<html lang="ko">
<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>HTML_STUDY</title>
</head>
<body>
<h1>Welcome to Study!</h1>
<p>나는 어떤 인간일까? with <strong>radioBox</strong></p>
<input type="radio" name="human" value="아침형인간"><span>아침형인간</span>
<input type="radio" name="human" value="점심형인간"><span>점심형인간</span>
<input type="radio" name="human" value="저녁형인간"><span>저녁형인간</span>
<input type="radio" name="human" value="심야형인간"><span>심야형인간</span>
<h3 class="myType"></h3>
<script>
const myType = document.querySelector(".myType");
const humans = document.querySelectorAll("[name=human]")
humans.forEach((radio) => {
radio.addEventListener('change', (event)=>{
const radios = event.target;
if(radios.checked){
myType.textContent = `당신은 ${radios.value}입니다.`;
}
})
})
</script>
</body>
</html>위와 같이 radio라는 input type을 이용하여 내가 해당하는 인간에 체크를 할 경우 해당 부류의 인간이라고 출력되는 모습을 볼 수 있다.
Prospective Junior Front-end Developer