sounisi5011 · May 31, 2021 15:49
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang=ja>
 <meta charset=utf-8>
 <meta name=viewport content="width=device-width,initial-scale=1">
 <meta name=format-detection content="telephone=no,email=no,address=no">
 <title>ボタンで画像を切り替えるサンプルページ</title>
 <h1>ボタンで画像を切り替えるサンプルページ</h1>
 <p><img id="image" src="http://placekitten.com/300/200">
 <p>
  <button id="show-kitten">ネコ</button>
  <button id="show-bear">クマ</button>
  <button id="show-bacon">ベーコン</button>
 <footer>
  <h2>Gist</h2>
  <p><a href="https://gist.github.com/sounisi5011/4b87ccefe3380230a938ff64ec6b2840">gist.github.com<wbr>/sounisi5011<wbr>/4b87ccefe3380230a938ff64ec6b2840</a>
 </footer>
 <script src="./main.js" defer></script>
diff --git a/main.js b/main.js
 const imageElem = document.getElementById('image');

 document.getElementById('show-kitten').addEventListener('click', () => {
  imageElem.src = 'http://placekitten.com/300/200';
 });

 document.getElementById('show-bear').addEventListener('click', () => {
  imageElem.src = 'http://placebear.com/300/200';
 });

 document.getElementById('show-bacon').addEventListener('click', () => {
  imageElem.src = 'http://baconmockup.com/300/200';
 });
	<!DOCTYPE html>
	<html lang=ja>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width,initial-scale=1">
	<meta name=format-detection content="telephone=no,email=no,address=no">
	<title>ボタンで画像を切り替えるサンプルページ</title>
	<h1>ボタンで画像を切り替えるサンプルページ</h1>
	<p><img id="image" src="http://placekitten.com/300/200">
	<p>
	<button id="show-kitten">ネコ</button>
	<button id="show-bear">クマ</button>
	<button id="show-bacon">ベーコン</button>
	<footer>
	<h2>Gist</h2>
	<p><a href="https://gist.github.com/sounisi5011/4b87ccefe3380230a938ff64ec6b2840">gist.github.com<wbr>/sounisi5011<wbr>/4b87ccefe3380230a938ff64ec6b2840</a>
	</footer>
	<script src="./main.js" defer></script>
	const imageElem = document.getElementById('image');

	document.getElementById('show-kitten').addEventListener('click', () => {
	imageElem.src = 'http://placekitten.com/300/200';
	});

	document.getElementById('show-bear').addEventListener('click', () => {
	imageElem.src = 'http://placebear.com/300/200';
	});

	document.getElementById('show-bacon').addEventListener('click', () => {
	imageElem.src = 'http://baconmockup.com/300/200';
	});