結果に対応した文章とラッキーアイテムを出してみた
おみくじプログラムの改造の自分バージョンをベースに改良。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おみくじ</title>
</head>
<body>
<h1>おみくじ</h1>
<input type="button" value="あなたの運勢は？" id="jsButtom">
<p>あなたの運勢は...
<img id="jsResult"></img>
<p>文字にすると <span id="jsResultComment"></span></p>
<p>ラッキーアイテムは <span id="jsResultItem"></span></p>
</p>
<script src="js/version5.js" async defer></script>
</body>
</html>
JavaScript
var jsButtom = document.getElementById('jsButtom'); //ボタンをIDでgetしてキャッシュ
jsButtom.onclick = function() { //ボタンがonclickされた時に起きる処理
var omikuji = ["daikichi", "chukichi", "shokichi", "suekichi", "kyo"];
var comment = ["大吉でした", "中吉でした", "小吉でした", "末吉でした", "凶でした。。。"];
var item = ["大斧！", "中華包丁！", "小麦粉！", "末広がりな８！", "凶器はダメです"];
var result = Math.floor(Math.random() * omikuji.length);
var imgFolder = "img/"; //フォルダパスをキャッシュ
var fileExtension = ".png"; //ファイル拡張子をキャッシュ
document.getElementById('jsResult').src = imgFolder + omikuji[result] + fileExtension;
document.getElementById('jsResultComment').innerHTML = comment[result];
document.getElementById('jsResultItem').innerHTML = item[result];
};
覚えた
resultの結果は使いまわせる。
onclickで一回だけ乱数生成してるから、画像以外の他の要素にも同じ対応したものが出せる
ふとした疑問
最初はこうやって書いてたのだが、途中で思いついた。
オブジェクトにして結果をまとめてしまって、resultを一度生成にして、プロパティにアクセスして表示すれば良いんじゃないか？（自分で言ってて意味が分からない）
はじめてのオブジェクト
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>おみくじ</title>
</head>
<body>
<h1>おみくじ</h1>
<input type="button" value="あなたの運勢は？" id="jsButtom">
<p>あなたの運勢は...
<img id="jsResult"></img>
<p>文字にすると <span id="jsResultComment"></span></p>
<p>ラッキーアイテムは <span id="jsResultItem"></span></p>
</p>
<script src="js/version6.js" async defer></script>
</body>
</html>
JavaScript
var jsButtom = document.getElementById('jsButtom'); //ボタンをIDでgetしてキャッシュ
var imgFolder = "img/"; //フォルダパスをキャッシュ
var fileExtension = ".png"; //ファイル拡張子をキャッシュ
var omikujiFileName = ["daikichi", "chukichi", "shokichi", "suekichi", "kyo"];
var omikujiComment = ["大吉でした", "中吉でした", "小吉でした", "末吉でした", "凶でした。。。"];
var omikujiItem = ["大斧！", "中華包丁！", "小麦粉！", "末広がりな８！", "凶器はダメです"];
jsButtom.onclick = function() { //ボタンがonclickされた時に起きる処理
var result = Math.floor(Math.random() * omikujiFileName.length);
var omikuji = { //オブジェクトを生成
image: omikujiFileName[result],
comment: omikujiComment[result],
item: omikujiItem[result]
};
console.log('omikuji.result');
document.getElementById('jsResult').src = imgFolder + omikuji.image + fileExtension;
document.getElementById('jsResultComment').innerHTML = omikuji.comment;
document.getElementById('jsResultItem').innerHTML = omikuji.item;
};
結果
完全に冗長だった。。。
オブジェクトにしなくたってそのまま配列から呼び出せば良いのに、わざわざオブジェクトにしてるのが変？
daichiki〜kyoオブジェクトを生成して、その中にそれぞれimage、comment、itemプロパティを設定したほうが良いのかな。。。
配列を宣言して、Math.randomで乱数取り出しして、オブジェクトのプロパティを取り出すところはwitch/caseなのかな？
謎は深まる。。。
でも
こんな謎の怪文書を後に残しておくことが大事！