디지털 컨버전스/Java Script
[Javascript] 예제 - 입력값 가져오기
gimyeondong
2020. 4. 13. 14:45
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="text">
<button id="say">Say!</button>
<script>
document.getElementById("say").onclick = function(){
var result = document.getElementById("text").value;
alert(result);
document.getElementById("text").value ="";
};
</script>
</body>
</html>
quiz04
value 속성이 모든 엘리먼트에 다 있는 것은 아님
value 속성없는 경우 시작태그 끝 태그 사이에 값을 넣어줌 : innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="ABC">
<button id="pop">innerHTML</button>
<script>
document.getElementById("pop").onclick = function(){
document.getElementById("pop").innerHTML ="ABC";
};
</script>
</body>
</html>quiz05
입력값 밑으로 이동 시켜서 출력하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="txt">
<button id="move">이동</button>
<div id="box" style="border: 1px solid black;line-height: 200px;text-align: center;width: 200px"></div>
<script>
document.getElementById("move").onclick = function(){
var result = document.getElementById("txt").value;
document.getElementById("box").innerHTML = result;
};
</script>
</body>
</html>quiz06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border=1 style="text-align: center;">
<tr >
<td ><input id ="num1" type=text style="text-align: center;"></td>
</tr>
<tr>
<td><input id ="num2" type=text style="text-align: center;"></td>
</tr>
<tr>
<td><input id ="btn" type="button" value="+"></td>
</tr>
<tr>
<td> <input id ="answer" type=text style="text-align: center;"></td>
</tr>
</table>
<!--
<input id ="num1" type=text>
<br>
<input id ="num2" type=text>
<br>
<input id ="btn" type="button" value="+">
<br>
<input id ="answer" type=text>
<br>
-->
<script>
document.getElementById("btn").onclick = function(){
var result1 = document.getElementById("num1").value;
var result2 = document.getElementById("num2").value;
document.getElementById("answer").value = parseInt(result1)+parseInt(result2);
};
</script>
</body>
</html>자바스크립트는 타입이 명시적으로 사용되지 않음
하지만 parseInt 해줘야 연산 가능
quiz07
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id ="msg" style="border: 1px solid black;width: 200px;height: 200px;margin: auto;text-align: center;line-height: 200px;">Message div</div>
<script>
document.getElementById("msg").onmouseenter = function(){
document.getElementById("msg").innerHTML = "마우스 무거워 저리치워!"
};
document.getElementById("msg").onmouseout = function(){
document.getElementById("msg").innerHTML = "어디가 마우스 이리와!"
};
</script>
</body>
</html>quiz08
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{box-sizing: border-box;}
div{border: 1px solid black;}
.wrapper{
width: 300px;
height: 150px;
}
input{
width: 100%;
height: 50px;
text-align: center;
}
.wrapper>div{
height: 50px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<!-- onkeyup / oninput-->
<div class="wrapper">
<input type="text" id=num1>
<br>
<input type="text" id=num2>
<div id=result></div>
</div>
<script>
document.getElementById("num2").onkeyup = function(){
if(document.getElementById("num1").value==document.getElementById("num2").value){
document.getElementById("result").innerHTML = "패스워드가 일치합니다"
document.getElementById("result").style.color = "blue";
}else{
document.getElementById("result").innerHTML = "패스워드가 일치하지 않습니다"
document.getElementById("result").style.color = "red";
}
};
</script>
</body>
</html>oninput : 입력시에 트리거
onkeyup : 키보드를 눌렀다가 땠을 때