아래처럼 시작단과 끝단을 입력한 후 구구단 출력 버튼을 누르면 구구단이 출력되도록 만들어보자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
const viewGugudan = function() {
const startDan = parseInt(document.frm.startdan.value);
const endDan = parseInt(document.frm.enddan.value);
// console.log(startDan, endDan);
let html = '<table border="1" width="800">';
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>';
console.log(html);
const div = document.getElementById('result');
div.innerHTML = html;
};
</script>
</head>
<body>
<table>
<tr>
<td>
<form name="frm">
시작단 : <input type="text" name="startdan" placeholder="시작단" />
~
끝단 : <input type="text" name="enddan" placeholder="끝단" />
<input type="button" value="구구단 출력" onclick="viewGugudan()" />
</form>
</td>
</tr>
</table>
<br /><hr /><br />
<div id="result"> </div>
</body>
</html>'JavaScript, React 🍦 > Javascript 공부' 카테고리의 다른 글
| [Javascript] 년, 월 선택하면 달력(캘린더) 보여주는 프로그램 (0) | 2024.04.26 |
|---|---|
| [Javascript] 입력창에 검색어 입력 후 다음, 네이버, 구글에서 검색결과 보기 (0) | 2024.04.26 |
| [Javascript] 중복없는 로또번호 출력 (0) | 2024.04.25 |
| [Javascript] 국영수 총점과 평균 나타내는 표 만들기 (0) | 2024.04.25 |
| [Javascript] 구구단 테이블 만들기 (0) | 2024.04.25 |
