<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ex02.html</title>
<link href="css/mystyle1.css" rel="stylesheet" />
</head>
<body>
<div class="container6">
<h3>실습2 - 구구단</h3>
<input type="number" id="n1" />
<input type="button" id="b1" value="구구단 출력" />
<div id="o1">구구단 출력</div>
</div>
<script>
const n1 = document.getElementById('n1');
const b1 = document.getElementById('b1');
const o1 = document.getElementById('o1');
b1.addEventListener('click', function() {
o1.innerHTML = ""
// for(초기값, 조건, 증가값)
for(let i=1; i<=9 ; i++){
o1.innerHTML +=
`${n1.value} X ${i} = ${Number(n1.value)*i} <br />`;
}
/* for(let i=7; i>=4; i--){
console.log(i);
}
i의 값은? =3
bcz. 7, 6, 5, 4 까지 갔다가 i가 3까지 갔다가 멈춤
*/
o1.innerHTML += "<hr />";
const arr = [1,2,3,4,5,6,7,8,9];
for(let tmp of arr){
o1.innerHTML +=
`${n1.value} X ${tmp} = ${Number(n1.value)*tmp} <br />`;
}
});
</script>
</body>
</html>
20211208-