0419과제는 대표적으로 input태그와 addEventListener를 이용해서 input 안에 맞는 내용을 쳤다면(if) O를 표시하고'
아니라면(else) X를 표시하는 걸 만들어 보았다.
(사용한 태그 : span, lablem, input, class, value)
(사용한 함수 : addEventListener, if, else, documnet.querySelector,innerHTML)
(사용한 스타일 : style.backgroundColor)
좀 복잡하게 만든감이 없지않아 있지만 색깔을 넣느라 그랬다
<!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=동해물과.0">
<title>과제19 한컴타자</title>
</head>
<body>
<h1>애국가 타자연습</h1>
<h3>타이핑을 하여 내용이 일치하면 ok 표시</h3>
<h3>ok 표시를 위한 태그는 span 사용 권장</h3>
<hr>
<h2>input 이벤트와 조건문을 활용</h2>
<h3>값을 입력하면 맞는지 점검함</h3>
<span class="span1"><label for="">동해물과<input type="text" class="input1" value=""></label> <span class="ox1"></span> </span>
<br><br>
<span class="span2"><label for="">백두산이<input type="text" class="input2" value=""></label> <span class="ox2"></span> </span>
<h2>키보드 이벤트 활용</h2>
<h3>Enter를 누르면 확인함</h3>
<span class="span3"><label for="">마르고<input type="text" class="input3" value=""></label> <span class="ox3"></span></span>
<br><br>
<span class="span4"><label for="">닳도록<input type="text" class="input4" value=""></label> <span class="ox4"></span></span>
<script>
// input 박스 지정
let input1 = document.querySelector(".input1")
let input2 = document.querySelector(".input2")
let input3 = document.querySelector(".input3")
let input4 = document.querySelector(".input4")
// 색깔 span 태그 지정
let span1 = document.querySelector(".span1")
let span2 = document.querySelector(".span2")
let span3 = document.querySelector(".span3")
let span4 = document.querySelector(".span4")
// ox span 태그 지정
let text1 = document.querySelector(".ox1")
let text2 = document.querySelector(".ox2")
let text3 = document.querySelector(".ox3")
let text4 = document.querySelector(".ox4")
input1.addEventListener("input",() => {
if (input1.value == "동해물과") {
span1.style.backgroundColor = "green"
text1.innerHTML = "O"
}
else {
span1.style.backgroundColor = "red"
text1.innerHTML = "X"
}
})
input2.addEventListener("input",() => {
if (input2.value == "백두산이") {
span2.style.backgroundColor = "green"
text2.innerHTML = "O"
}
else {
span2.style.backgroundColor = "red"
text2.innerHTML = "X"
}
})
input3.addEventListener("keyup",(event) => {
if (input3.value == "마르고") {
if (event.key == "Enter") {
console.log("마르고.ok")
span3.style.backgroundColor = "green"
text3.innerHTML = "O"
}
}
else {
span3.style.backgroundColor = "red"
text3.innerHTML = "X"
}
})
input4.addEventListener("keyup",(event) => {
if (input4.value == "닳도록") {
if (event.key == "Enter") {
console.log("닳도록.ok")
span4.style.backgroundColor = "green"
text4.innerHTML = "O"
}
}
else {
span4.style.backgroundColor = "red"
text4.innerHTML = "X"
}
})
</script>
</body>
</html>
꿈꾸는 개발자