<!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>
<input type="text" id="num1">
<input type="text" id="num2">
<button id="btn">연산결과</button>
<p id="container"></p>
<script>
// 1. input태그 2개와 button태그의 객체 요소 정보를 가져오기 (ID값)
const num1 = document.getElementById('num1');
const num2 = document.getElementById('num2');
const btn = document.getElementById('btn');
const container = document.getElementById('container');
// 2. button태그에 이벤트를 연결(addEventListener), 이벤트 속성 click
btn.addEventListener('click', () => {
const number1 = parseInt(num1.value);
const number2 = parseInt(num2.value);
console.log(num1.value);
console.log(num2.value);
console.log(number1 + number2);
// 3. 연산결과가 p태그에 출력이 되도록 -> 강제 형 변환
const result = number1 + number2;
container.innerText = `연산결과: ${result}`;
})
</script>
</body>
</html>
개발자