JS：足し算をする

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<script src="main.js"></script>
	<title>足し算をする</title>
</head>
<body>
	<h1>足し算をする</h1>
	<p>
		<input type="text" id="text1">
		＋
		<input type="text" id="text2">
		<button id="btnKeisan">＝</button>
		<span id="kekka">？</span>
	</p>
</body>
</html>

style.css

/* style.css */
body{
	font-size: 24pt;
}

main.js

// main.js

function keisan(){
	let text1 = document.getElementById("text1");
	let text2 = document.getElementById("text2");
	let result = Number(text1.value) + Number(text2.value);
	document.getElementById("kekka").innerHTML = result;
}

window.addEventListener("load", function(){
	let btnKeisan = document.getElementById("btnKeisan");
	btnKeisan.addEventListener("click", keisan);
});