초기 화면
시작단과 끝단 입력 시 구구단 출력
소스코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
const viewGugudan = function() {
// 시작단의 입력 검사
if( document.frm1.startdan.value.trim() == "") {
alert("시작단을 입력하셔야 합니다.");
return;
}
// 끝단의 입력 검사
if( document.frm1.enddan.value.trim() == "") {
alert("끝단을 입력하셔야 합니다.");
return;
}
// 시작단의 value 값 공백 제거 후 정수화
let startDan = parseInt(document.frm1.startdan.value.trim());
// 끝의 value 값 공백 제거 후 정수화
let endDan = parseInt(document.frm1.enddan.value.trim())
// table 생성
let html = "<table border='1' width='800'>";
// for문을 통한 구구단 출력
for( let i = startDan; i<= endDan; i++ ) {
html += "<tr>";
for( let j=1; j<=9; j++ ) {
html += "<td>" + i + "X" + j + "=" + (i * j) + "</td>";
}
html += "</tr>";
}
html += "</table>";
// id가 "result"인 div 태그에 테이블 html 생성
let div1 = document.getElementById('result')
// html 태그 삽입을 위한 innerHTML 메서드 적용
div1.innerHTML = html;
}
</script>
</head>
<body>
<form name="frm1">
<input type = "text" name="startdan" placeholder="시작단" />
<input type = "text" name="enddan" placeholder="끝단" />
<input type = "button" value="구구단 출력" onclick="viewGugudan()"/>
<br /></hr /><br />
<div id = "result"></div>
</form>
</body>
</html>
댓글