tsuyopon-xyz/README.md Secret

## README.md

      
    Raw
  

              README.md
            
          
    （コールバック関数の利用例）コールバック関数を使ってクリック処理を実装する

話の流れ


HTMLとJavaScriptの下準備をする
クリック処理を実装する(コールバック関数を直接埋め込む)
【おまけ】クリック処理を実装する(定義済みの関数をコールバック関数として使う)

資料


addEventListener


## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>クリック処理のテスト</title>
</head>
<body>
  <h1 id="logo">ここをクリック！</h1>
  <script src="./main.js"></script>
</body>
</html>

## main.js
const logo = document.getElementById('logo');

const onClick = () => {
  console.log('クリックされた in onClick関数!');
};


logo.addEventListener( 'click', onClick );
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>クリック処理のテスト</title>
	</head>
	<body>
	<h1 id="logo">ここをクリック！</h1>
	<script src="./main.js"></script>
	</body>
	</html>
	const logo = document.getElementById('logo');

	const onClick = () => {
	console.log('クリックされた in onClick関数!');
	};


	logo.addEventListener( 'click', onClick );