기록 ＞ 기억
[JavaScript] 폼 객체 ① text 객체 본문
text 객체
예제 ①
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form - text</title>
</head>
<body>
<form name="frm" method="post">
<input type="text" name="original" value="hello.."><br>
<input type="text" name="copy"><br>
<input type="button" name="btn" value="복사" onclick="copyText(this.form)">
<!-- this는 자기자신을 의미하고, this.form은 이 버튼을 감싸고 있는 form 을 의미 -->
</form>
<script>
//매개변수 obj는 form 객체를 의미
function copyText(obj) {
//form 안에 original 이란 이름을 가지는 요소의 값
let original = obj.original.value;
//form 안에 copy 라는 이름을 가지는 요소의 값에 넣기
obj.copy.value = original;
}
</script>
</body>
</html>
● form 안에 객체에 접근할 때는 name 속성으로 접근
예제 ②
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form - text2</title>
<script src="form_text2.js"></script>
</head>
<body>
<form name="frm_score" method="post">
<label>학생명</label>
<input type="text" name="irum"><br>
<label>국어</label>
<input type="number" name="kor" onchange="calTotAvg(this.form)"><br>
<label>영어</label>
<input type="number" name="eng" onchange="calTotAvg(this.form)"><br>
<label>수학</label>
<input type="number" name="math" onchange="calTotAvg(this.form)"><br>
<label>컴퓨터</label>
<input type="number" name="computer" onchange="calTotAvg(this.form)"><br>
<label>총점</label>
<input type="number" name="tot" readonly><br>
<label>평균</label>
<input type="number" name="avg" readonly><br>
<input type="button" value="수정" name="btnModify"><br>
<textarea name="output" rows="10" cols="30"></textarea>
</form>
</body>
</html>window.onload = function() {
//이름, 국어, 영어, 수학, 컴퓨터 순
let score = [ "홍길동", 90, 80, 70, 100 ];
let frm = document.frm_score;
//초기값 세팅
frm.irum.value = score[0];
frm.kor.value = score[1];
frm.eng.value = score[2];
frm.math.value = score[3];
frm.computer.value = score[4];
//총점 계산
calTotAvg(frm);
//수정버튼 클릭시
frm.btnModify.onclick = function() {
let str = "";
str += "학생명 : " + frm.irum.value + "\n";
str += "국어 : " + frm.kor.value + "\n";
str += "영어 : " + frm.eng.value + "\n";
str += "수학 : " + frm.math.value + "\n";
str += "컴퓨터 : " + frm.computer.value + "\n";
str += "총점 : " + frm.tot.value + "\n";
str += "평균 : " + frm.avg.value + "\n";
frm.output.innerHTML = str;
}
}
//총점과 평균 계산
function calTotAvg(obj) {
let tot = 0;
let avg = 0;
let kor = Number(obj.kor.value);
let eng = Number(obj.eng.value);
let math = Number(obj.math.value);
let computer = Number(obj.computer.value);
tot = kor + eng + math + computer;
avg = tot / 4.0;
obj.tot.value = tot;
obj.avg.value = avg;
}
● window.onload = function() { ... } 해주는 이유
HTML 문서가 화면에 다 로드된 후에 실행시키기 위함.
화면에 다 로드 되지도 않았는데 객체에 접근하려고 하면 에러발생!!
방법 1)
HTML 화면을 다 그리고 난 뒤 객체에 접근할 수 있도록
<body>의 가장 끝 부분에 <script> 작성!!
방법 2)
window.onload = function() { ... }
'IT국비지원' 카테고리의 다른 글
| [JavaScript] 폼 객체 ④ select 객체 (0) | 2021.09.29 |
|---|---|
| [JavaScript] 폼 객체 ③ checkbox 객체 (0) | 2021.09.29 |
| [JavaScript] 폼 객체 ② radio 객체 (0) | 2021.09.29 |
| [JavaScript] 폼 객체, 내장 객체, 윈도우 객체 (0) | 2021.09.17 |
| [Algorithm] 정렬 알고리즘 (0) | 2021.09.17 |
| [JavaScript] 함수 (function) (0) | 2021.09.15 |
| [JavaScript] 배열 (Array) (0) | 2021.09.14 |
'IT국비지원' Related Articles
more
Comments