###症状
HTMLとjavascriptでおみくじ+cookieの実装を試みています。
ネットで見つけたソースをカスタマイズして実装してみたのですが、
現状のソースですと、おみくじ結果の表示に不具合があります。
具体的には、「おみくじ結果の画像」とその下に表示される「文言」が、バラバラに表示されてしまう時があります。
(画像は「大吉」なのに、文言は「凶」用のものが表示されてしまう、など)
おそらくは、イベントハンドラ onClick 内に、以下のように2つ記述していることが原因なのかなと思っています。
<input type="button" value="おみくじを引く" onClick="omikuji(document.getElementById('resultTxt'));omikuji(document.getElementById('resultImg'));">
###こうしたい!のですが記述が判らない…
onClickイベントを複数設定しなくてもいいように、
JavaScriptのイベントハンドラをHTMLには書かずに外部ファイルで設定する
http://glatchdesign.com/blog/web/javascript/700
等を参考にソースをいじってみたのですが、うまく動きません。。
ご教示いただければ幸いです。よろしくお願いいたします。
###現状のHTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> </head> <body> <div class="str-contents"> <div class="omikujiArea"> <div class="result"> <p><img id="resultImg" src="result.png" alt="おみくじ結果"></p> <p id="resultTxt">おみくじを引いて今すぐクーポンをゲット!</p> </div> <div class="btn"> <input type="button" value="おみくじを引く" onClick="omikuji(document.getElementById('resultTxt'));omikuji(document.getElementById('resultImg'));"> </div> </div> </div><!-- /str-contents --> <script type="text/javascript" src="test_omikuji_20161110.js" async defer></script> </body> </html>
###現状のjavascript
var omikuji = (function (getCookie, setCookie) { //cookieの有効日数設定 var save = 3; var resultList = [ {src:'result-01.png', alt:'大吉', innerHTML:'<a href="/coupon_daikichi.html" target="_blank">おめでとうございます!5000円分のクーポンをプレゼント!</a>'}, {src:'result-02.png', alt:'吉', innerHTML:'<a href="/coupon_kichi.html" target="_blank">おめでとうございます!3000円分のクーポンをプレゼント!</a>'}, {src:'result-03.png', alt:'中吉', innerHTML:'<a href="/coupon_chukichi.html" target="_blank">おめでとうございます!1000円分のクーポンをプレゼント!</a>'}, {src:'result-04.png', alt:'小吉', innerHTML:'<a href="/coupon_shokichi.html" target="_blank">おめでとうございます!500円分のクーポンをプレゼント!</a>'}, {src:'result-05.png', alt:'凶', innerHTML:'残念!'} ]; return function (node) { var d = node.ownerDocument; var v = d./*@cc_on @if (1) parentWindow @else@*/ defaultView /*@end@*/; var today = (new Date).getDate () + ''; var lastDay = getCookie.call (v, 'day'); var unsei; var rand; var itemNum; if (today === lastDay){ unsei = resultList [Number (getCookie.call (v, 'result'))]; }else{ rand = Math.floor (Math.random() * resultList.length); //itemNum(resultListのおみくじ5種)ごとに確率を設定 if(rand < 4){ itemNum = 0; }else if(rand < 4.3){ itemNum = 1; }else if(rand < 4.7){ itemNum = 2; }else if(rand < 4.9){ itemNum = 3; }else{ itemNum = 4; } unsei = resultList[itemNum]; setCookie.call (v, 'day', today, save); setCookie.call (v, 'result', String (rand), save); } node.src = unsei.src; node.alt = unsei.alt; node.innerHTML = unsei.innerHTML; }; })(function () { return (function (name) { var d = this.document; var n = encodeURIComponent (name).replace (/([.*()])/g, '\\$1'); var v = d.cookie.match (RegExp (n + '\\s*=\\s*(.*?)(?:[\\s;,]|$)')); return v ? decodeURIComponent (v[1]) : ''; }).apply (this, arguments); },function () { return (function (name, value, day, path, domain) { var d = this.document; var t = new Date; t.setDate (t.getDate () + (day || 0)); d.cookie = encodeURIComponent (name) + '=' + encodeURIComponent (value) + ';' + 'expires=' + t.toUTCString () + ';' + (path ? 'path=' + encodeURIComponent (path) + '': '') + (domain ? 'domain=' + encodeURIComponent (domain) + ';': ''); }).apply (this, arguments); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/11/11 05:52
2016/11/11 06:07
2016/11/11 07:43
2016/11/11 07:46
2016/11/11 07:56
2016/11/11 08:55