INPUT 출력하기
in Programming on JavaScript
◇ JS 실습 포스팅 시리즈 ◇
- 입력 데이터 출력 실습 - 현재 글
- n초 마다 사진 바꾸기
- 버튼위에 마우스 올려 사진 바꾸기
- 버튼위에 마우스 올려 사진 바꾸기2
- 자식창에서 부모창 정보 수정 하기
- 야식 주문 프로그램 만들기
다음과 같이 입력을 하면 화면에 바로 출력하는 프로그램을 만들려고 한다. JS실습이기 때문에, HTML과 CSS에 대한 부분 설명보다는 JS에 초점을 맞추어 글을 쓸 것이다.
받은 인풋을 화면에 추가해보자.
HTML
- 화면 구성은 크게 두가지, input을 받아들이는 table 영역과 결과를 표시하는 target 영역으로 나뉘어져있다. 아주 간단히 표현하자면 다음과 같다.
<div class="wrapper">
<table>
<!--각종 input 태그들-->
<!--인풋 버튼-->
</table>
<div id="target">
<!--결과를 표시할 구역-->
</div>
</div>
버튼이 눌리면 이벤트가 발생시키기 위해 input 태그 button 속성에서 onclick =”함수;”를 한다. (이 방법은 html에 js가 섞인 형식이라서 별로 좋지는 않지만 기존 코드에 많이 존재한다고 한다. 다른 방법은 여기서 확인)
HTML 코드
<input type="button" id="btn" onclick ="register();" value="등록">JS코드
function register(){ //code }그 외 그냥 input 태그 채워주면 된다. 어떻게 하는지 모르면 여기 를 참고 해주세요.
전체코드
<body>
<div class="wrapper">
<h1>[ 꼬리표 만들기 ]</h1>
<table>
<tr>
<td>
<label for="username">이름 : <input type="text" id="username" placeholder="이름을 입력하세요"></label>
<label for="kor">국어 : <input class="score" type="text" id="kor"></label>
<label for="eng">영어 : <input class="score" type="text" id="eng"></label>
<label for="mat">수학 : <input class="score" type="text" id="mat"></label>
<input type="button" id="btn" onclick ="register();" value="등록">
</td>
</tr>
</table>
<hr> <br>
<h2> [ 결과 ] </h2>
<div id="target">
</div>
</div>
</body>
JS
- window.onload = function(){ //code }는 화면에 html과 css의 로드가 끝나기를 기다린 후 js를 실행할 수 있게 해준다. 로드 전에 js가 실행되면 오류가 생길 수 있기 때문에.
- document.getElementById(‘id’) 는 id를 이용해 js에서 html 의 요소에 접근하게 해준다.
- htmlObject.innerHTML 는 좌변에 사용해 htmlObject의 내용을 바꿀 수도 있고, 우변에 사용해 htmlObject의 값을 가져올 수 있다. 자세한 내용은 클릭
- 표에다가 출력하는게 아니면 코드가 간단해지겠지만, 난 표에다 하고싶어서 아래처럼 했다.
HTML CSS 로딩이 끝난 후, target이라는 id를 가진 요소를 찾아서 거기에 우변에 있는 문자열을 쓴다.
window.onload = function(){
document.getElementById('target').innerHTML = '<table border="1px"><tr><td>번호</td><td>이름</td><td>국어</td><td>영어</td><td>수학</td><td>합계</td><td>평균</td></tr>'
info = '<table border="1px"><tr><td>번호</td><td>이름</td><td>국어</td><td>영어</td><td>수학</td><td>합계</td><td>평균</td></tr>'
}
- register이라는 함수는 어차피 버튼을 누를 후에 실행되니까( html css 로딩 후), window.onload에 넣지 않아도 된다.
- input tag에서 값을 가지고 올때는 .innerHTML 이 아니라 .value를 사용해야한다.
- 이름이 한 글자 이상 들어갔는지, 점수는 숫자로만 이루어졌는지 확인하고 target 영역에 출력해준다.(target은 input이 아니라 div 태그니까 .value가 아니라 .innerHTML 을 써야한다.) 함수를 어떻게 써야하는지 모른다면 여기
var index=1;
window.onload = function(){
document.getElementById('target').innerHTML = '<table border="1px"><tr><td>번호</td><td>이름</td><td>국어</td><td>영어</td><td>수학</td><td>합계</td><td>평균</td></tr>'
info = '<table border="1px"><tr><td>번호</td><td>이름</td><td>국어</td><td>영어</td><td>수학</td><td>합계</td><td>평균</td></tr>'
}
function register() {
var name = document.getElementById("username").value;
if(name.trim().length==0){
alert("이름을 제대로 입력해 주세요")
return;
}
var kor = document.getElementById('kor').value;
var eng = document.getElementById('eng').value;
var mat = document.getElementById('mat').value;
if(!(Number(kor)&&Number(eng)&&Number(mat))){
alert("숫자만 입력해주세요");
document.getElementById('kor').value = "";
document.getElementById('eng').value = "";
document.getElementById('mat').value = "";
return;
}
var sum = parseInt(kor)+parseInt(eng)+parseInt(mat);
var avg = sum/3;
document.getElementById('username').value = "";
document.getElementById('kor').value = "";
document.getElementById('eng').value = "";
document.getElementById('mat').value = "";
info = info +"<tr><td>"+ index + "</td><td>" + name +"</td><td>"+kor+"</td><td>"+eng+ "</td><td>" + mat+"</td><td>"+sum +"</td><td>"+(Math.round(avg*10)/10) +"</td></tr>";
index++;
document.getElementById("target").innerHTML = info;
}
전체 코드!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div.wrapper{
width : 900px;
margin: 0 auto;
text-align: center;
}
h1, h2, table {
text-align: center;
}
input.score {
width : 100px;
}
#target table{
width: 900px;
margin: 0 auto;
}
table tr:nth-child(odd){background-color: skyblue;}
table tr:nth-child(even){background-color: pink;}
table tr:first-child{background-color: white}
</style>
<script>
var index=1;
window.onload = function(){
document.getElementById('target').innerHTML = '<table border="1px"><tr><td>번호</td><td>이름</td><td>국어</td><td>영어</td><td>수학</td><td>합계</td><td>평균</td></tr>'
info = '<table border="1px"><tr><td>번호</td><td>이름</td><td>국어</td><td>영어</td><td>수학</td><td>합계</td><td>평균</td></tr>'
}
function register() {
var name = document.getElementById("username").value;
if(name.trim().length==0){
alert("이름을 제대로 입력해 주세요")
return;
}
var kor = document.getElementById('kor').value;
var eng = document.getElementById('eng').value;
var mat = document.getElementById('mat').value;
if(!(Number(kor)&&Number(eng)&&Number(mat))){
alert("숫자만 입력해주세요");
document.getElementById('kor').value = "";
document.getElementById('eng').value = "";
document.getElementById('mat').value = "";
return;
}
var sum = parseInt(kor)+parseInt(eng)+parseInt(mat);
var avg = sum/3;
document.getElementById('username').value = "";
document.getElementById('kor').value = "";
document.getElementById('eng').value = "";
document.getElementById('mat').value = "";
info = info +"<tr><td>"+ index + "</td><td>" + name +"</td><td>"+kor+"</td><td>"+eng+ "</td><td>" + mat+"</td><td>"+sum +"</td><td>"+(Math.round(avg*10)/10) +"</td></tr>";
index++;
document.getElementById("target").innerHTML = info;
</script>
</head>
<body>
<div class="wrapper">
<h1>[ 꼬리표 만들기 ]</h1>
<table>
<tr>
<td>
<label for="username">이름 : </label><input type="text" id="username" placeholder="이름을 입력하세요">
<label for="kor">국어 : </label><input class="score" type="text" id="kor">
<label for="eng">영어 : </label><input class="score" type="text" id="eng">
<label for="mat">수학 : </label><input class="score" type="text" id="mat">
<input type="button" id="btn" onclick ="register();" value="등록">
</td>
</tr>
</table>
<hr> <br>
<h2> [ 결과 ] </h2>
<div id="target">
</div>
</div>
</body>
</html>
