Daily coding
Java Script : 예제 2 - 퀴즈 맞추기 본문
방법 1: TagName으로 찾기 ( nodeList )
var str = document.getElementsByTagName("input")[1].value;
방법 2 : name 부여해서 찾기
var str = document.frm.answer.value;
방법 3 : name/id/class 없이 document에서 직접 노드 찾기
var str = document.forms[1].elements[1].value;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>(문제)</h1>
<h4>1,2번째 방법</h4>
영어 속담으로 "1일 1개씩 먹으면 의사 필요없다"라고 하는 과일은?<br>
<form action="" name="frm">
<input type="checkbox" id="eng">영어로 답한다.<br>
답: <input type="text" id="answer" size="10">
<button type="button" onclick="func()">정답확인</button>
</form>
<br>
<p id="p1"></p>
<script type="text/javascript">
function func() {
/*
// 방법 1
var str = document.getElementsByTagName("input")[1].value;
var enganswer = document.getElementById("eng").checked;
*/
// 방법 2
// form을 사용했을 때
var str = document.frm.answer.value;
var enganswer = document.frm.eng.checked;
if(str=="") {
alert('답을 입력하세요.');
return;
}
if(enganswer){
str = str.toLowerCase();
if(str === "apple"){
alert("정답입니다!");
document.getElementById("p1").innerHTML = "정답";
}
else{
alert("틀렸습니다! 정답은 apple입니다");
document.getElementById("p1").innerHTML = "오답";
}
}
else{
if(str == "사과"){
alert("정답입니다!");
document.getElementById("p1").innerHTML = "정답";
}
else{
alert("틀렸습니다! 정답은 사과입니다");
document.getElementById("p1").innerHTML = "오답";
}
}
document.getElementsByTagName("input")[0].value = "";
}
</script>
<h4>3번째 방법</h4>
<form action="">
<input type="checkbox">영어로 쓰기.<br>
답: <input type="text" size="10">
<button type="button" onclick="func2()">정답</button>
</form>
<script type="text/javascript">
// 방법 3
// id값을 신경쓰기 어려울 때, 모두 무시하고 사용할 수 있는 방법
function func2() {
var eng = document.forms[1].elements[0].checked;
var str = document.forms[1].elements[1].value;
alert(str);
if(enganswer){
str = str.toLowerCase();
if(str === "apple"){
alert("정답입니다!");
document.getElementById("p1").innerHTML = "정답";
}
else{
alert("틀렸습니다! 정답은 apple입니다");
document.getElementById("p1").innerHTML = "오답";
}
}
else{
if(str == "사과"){
alert("정답입니다!");
document.getElementById("p1").innerHTML = "정답";
}
else{
alert("틀렸습니다! 정답은 사과입니다");
document.getElementById("p1").innerHTML = "오답";
}
}
document.getElementsByTagName("input")[0].value = "";
}
</script>
</body>
</html>'Front-end > Java Script' 카테고리의 다른 글
| Java Script : 예제4 - 랜덤하게 주사위 돌리기 (0) | 2020.01.09 |
|---|---|
| Java Script : 예제3 - select 태그를 사용하여 링크 이동 (0) | 2020.01.09 |
| Java Script : 예제1 (0) | 2020.01.09 |
| JavaScript : DOM 객체 ( Document Object Model ) (0) | 2020.01.08 |
| JavaScript : 자바스크립트 핸들링 / 마우스 이벤트 (0) | 2020.01.08 |
'Front-end/Java Script' Related Articles
more
