はじめに
Webアプリを作成するためのメモ
電気のスイッチのようにボタンを押すと背景の色を変更できるスイッチを作成する
作成したもの
- スイッチの画像を押すと背景の色を白→黒 黒→白 に変更する
階層図
webPage/
├ image/
│ ├ switch_on.png
│ └ switch_off.png
├ js/
│ └ switch.js
│
index.html
コード
- index.html JavaScriptのメソッドchangeImage()を呼び出す
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景を制御する</title>
<script type="text/javascript" src='./js/switch.js'></script>
</head>
<body>
<!-- JavaScriptのchangeImage()メソッドを呼び出す -->
<img id="image_file" src="./image/switch_on.png" onclick="changeImage()">
</body>
</html>
- switch.js
- 背景を暗くするメソッドを作成する(toDark())
- 背景を明るくするメソッドを作成する(tolight())
- htmlから呼び出すメソッドを作成する(changeImage())
switch.js
// RGB値を制御するオブジェクト
let color = {red: 255, green: 255, blue: 255};
// 背景色を暗くする
function toDark(){
let body = document.getElementsByTagName("body")[0];
color.red =0; color.green=0; color.blue=0;
// 背景色を変更
body.style.backgroundColor = "rgb(" + color.red + "," + color.green + "," + color.blue + ")";
}
function tolight(){
let body = document.getElementsByTagName("body")[0];
color.red =255; color.green=255; color.blue=255;
// 背景色を変更
body.style.backgroundColor = "rgb(" + color.red + "," + color.green + "," + color.blue + ")";
}
function changeImage() {
//画像を切り替えて背景を変更する
if (document.getElementById("image_file").src.match("switch_off.png")) {
document.getElementById("image_file").src = "./image/switch_on.png";
tolight();
} else {
document.getElementById("image_file").src = "./image/switch_off.png";
toDark();
}
}
まとめ
html,javascriptはほとんど触ったことがないので、しょうもないミスで少しハマってしまった。
どこが間違っているか理解するのに時間がかかったため、デバッグ環境を構築してからコーディングする必要がありそう。