Skip to content

Instantly share code, notes, and snippets.

@sounisi5011

sounisi5011/README.md

Last active May 31, 2021 15:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sounisi5011/4b87ccefe3380230a938ff64ec6b2840 to your computer and use it in GitHub Desktop.
Save sounisi5011/4b87ccefe3380230a938ff64ec6b2840 to your computer and use it in GitHub Desktop.
Download ZIP
ボタンで画像を切り替えるサンプルページ
Raw
README.md
Raw
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>
Raw
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';
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment