구구단 게임

심민기·2022년 4월 27일
0

웹 개발

목록 보기
15/33

원본 글

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 코드분석.

계산 버튼 을 가져오고. 클릭 이벤트를 부여해줌.
첫째 수와 둘째 수를 각각 가져옴.
계산 결과 란에 둘을 곱한 것을 할당.

profile
왕초보

0개의 댓글