【Web】HTMLのclassをJavaScriptで動的に変更する (Web勉強記 4日目)

投稿日：2019年8月6日

最終更新日：2019年8月6日

classをJavaScriptから動的に変えたい

現在作成中のウェブおみくじで、おみくじの結果によってテキストの色を変えたいと思っている。いろいろ考えた結果、HTMLのclassをJavaScriptから変更すれば良い感じでできそうだったので、やってみた。

まず、HTMLを以下のように変更した。

	<!DOCTYPE html>
	<html>
	<head>
	<link rel = "stylesheet" href = "omikuji_element.css"/>
	<script>
	function tryFortune() {
	var resultInt = Math.floor(Math.random () * 7)
	switch (resultInt) {
	case 0 : resultText = "大凶"; resultClass = "bad"; break;
	case 1 : resultText = "凶"; resultClass = "bad"; break;
	case 2 : resultText = "末吉"; resultClass = "normal"; break;
	case 3 : resultText = "小吉"; resultClass = "normal"; break;
	case 4 : resultText = "中吉"; resultClass = "good"; break;
	case 5 : resultText = "吉"; resultClass = "good"; break;
	default : resultText = "大吉"; resultClass = "good"; break;
	}
	document.getElementById("result").textContent = resultText;
	document.getElementById("result").className = resultClass;
	}
	</script>
	</head>
	<body>
	<h1>HTMLとJavaScriptによるWebおみくじ</h1>
	<button onclick="tryFortune()">おみくじを引く</button>
	<p id = "result"></p>
	</body>
	</html>

view raw omikuji.html hosted with ❤ by GitHub

各おみくじの結果によりgood、normal、badをresultClassという変数に代入し、最後に

document.getElementById(“result”).className = resultClass;

でClassを変更している。また、CSSを以下のように変更した。

good、normal、badにより、おみくじ結果のテキストの色が青、緑、赤に変更されるようにしている。これで、おみくじの結果によってテキストの色を変更することができた。(あまりスマートじゃない気はするが…。)

今はこの本を読みながらHTML、CSS、JavaScriptの勉強してます。書籍のコードをなぞるだけだと面白味が無いしブログにものっけられないので、本で勉強したことをもとに何かつくり、コードを公開していくスタイルで日記を書いてます。最終的にはWebブラウザ上で動くゲームをつくって公開したい。

映画と旅行が大好きなエンジニア。お酒、ゲーム、読書も好き。