html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h1>구구단 게임</h1>
</div>
<div>
<input type="number" id="first">
<span>X</span>
<input type="number" id="second">
<button id="click">계산</button>
</div>
<div>
<span>=</span>
<span id="result"></span>
</div>
<script src="index.js"></script>
</body>
</html>
js
document.querySelector('#click').addEventListener('click', () => {
const first = document.querySelector('#first').value;
const second = document.querySelector('#second').value;
document.querySelector('#result').textContent = first * second;
});
js 코드분석.
계산 버튼 을 가져오고. 클릭 이벤트를 부여해줌.
첫째 수와 둘째 수를 각각 가져옴.
계산 결과 란에 둘을 곱한 것을 할당.