1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

JavaScriptを使用して背景の色を切り替えるスイッチを作る

Posted at

はじめに

Webアプリを作成するためのメモ
電気のスイッチのようにボタンを押すと背景の色を変更できるスイッチを作成する

作成したもの

  • スイッチの画像を押すと背景の色を白→黒 黒→白 に変更する
image.png image.png

階層図

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
  1. 背景を暗くするメソッドを作成する(toDark())
  2. 背景を明るくするメソッドを作成する(tolight())
  3. 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はほとんど触ったことがないので、しょうもないミスで少しハマってしまった。
どこが間違っているか理解するのに時間がかかったため、デバッグ環境を構築してからコーディングする必要がありそう。

1
0
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?