今回はボタンがクリックされると要素の背景色が変わるというものをJavaScriptで作る方法を紹介します。
サンプルコードは以下のようになります。
!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
}
#box {
width: 200px;
height: 200px;
margin-bottom: 50px;
border: 1px solid #000;
}
button {
width: 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="box">
</div>
<button id="change_c">色を変更</button>
<script>
let change = document.getElementById('change_c');
change.addEventListener('click', function () {
let num1 = Math.floor(Math.random() * 256),// R:乱数1
num2 = Math.floor(Math.random() * 256),// G:乱数2
num3 = Math.floor(Math.random() * 256),// B:乱数3
color = "rgb(" + num1 + "," + num2 + "," + num3 + ")";//RGB
console.log(color);
console.log(num1);
console.log(num2);
console.log(num3);
document.getElementById('box').style.backgroundColor = color;
// #boxのbackground-colorに変数colorを代入
});
</script>
</body>
</html>＜解説＞
＜HTML＞
<div id="box"></div>この部分は色が変わる部分（四角形）です。
<button id="change">色を変更</button>この部分はクリックされると”box”の背景色を変更するボタンです。
＜CSS＞
body {
display: flex;
flex-direction: column;
align-items: center;
}この部分はbody全体を中央に配置するというものです。
#box {
width: 200px;
height: 200px;
margin-bottom: 50px; //
border: 1px solid #000;
}この部分は”box”を正方形にするものです。（margin-bottomの部分は削除しても大丈夫です。）
button {
width: 100px;
text-align: center;
}これはボタンの見た目を変更するものです。
＜JavaScript＞
<script>
let change = document.getElementById('change_c');ここでは”change”という変数を宣言しています。宣言の内容は”change_c”要素を取得するというものです。
change.addEventListener('click', function () {これは”change_c”要素がクリックされた時｛｝の中のコードを実行するというものです。
let num1 = Math.floor(Math.random() * 256),// Rに代入
num2 = Math.floor(Math.random() * 256),// Gに代入
num3 = Math.floor(Math.random() * 256),// Bに代入これは0~255のランダムな値を計算させる変数です。
今回はRGBで背景色を指定するのでこの変数が３つ必要です。
color = "rgb(" + num1 + "," + num2 + "," + num3 + ")";//RGBこれは先程の変数３つをRGBに代入させる変数です。
以降、背景色を指定する時はこの変数を記述します。
console.log(color);
console.log(num1);
console.log(num2);
console.log(num3);これは先程の変数が正常に機能しているか確認するためコンソールに３つの乱数とRGBを表示するものです。
使用しているブラウザがGoogleChromeの場合は
document.getElementById('box').style.backgroundColor = color;
});
これは”box”要素を取得して背景色を先程記述した変数”color”に変更するという変数です。
これで完成です。
今回はこれでおしまいです。この記事が皆さんのお役に立てれば幸いです。