質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.39%

  • JavaScript

    21489questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

javascriptでおみくじ+cookie実装

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,361

ala_mar

score 1

症状

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);
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2016/11/11 17:07

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 1

checkベストアンサー

+1

動かすだけなら、

return function (node1, node2) {
  var d = node1.ownerDocument;

  //...

  node2.src = unsei.src;
  node2.alt = unsei.alt;
  node1.innerHTML = unsei.innerHTML;
};


として、

<input type="button" value="おみくじを引く" onClick="omikuji(document.getElementById('resultTxt'), document.getElementById('resultImg'));">


とするような感じで、引数を2つ持たせれば解決するかと思います。

onclick属性を廃止して、イベントリスナを使うならさらに

<input type="button" id="btn" value="おみくじを引く">
document.getElementById('btn').addEventListener('click', function(){
  omikuji(document.getElementById('resultTxt'), document.getElementById('resultImg'));
},false);


のような感じで書く必要があるでしょう。

動作確認はしてませんので、間違いがあるかもしれません。ご容赦ください。

追記

コメントを受けまして。

var btn = document.getElementById('btn');
var btnClickEvent = function(){
  omikuji(document.getElementById('resultTxt'), document.getElementById('resultImg'));
};
if (btn.addEventListener){
  btn.addEventListener('click', btnClickEvent, false);
} else if (btn.attachEvent){
  btn.attachEvent('onclick', btnClickEvent);
}


同様に動作確認はしていません。
 
参考:

古い Internet Explorer と attachEvent
EventTarget.addEventListener - Web API インターフェイス | MDN

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/11/11 16:46

    Lhankor_Mhyさま

    >ソースはすでにご提示しています。

    言葉足らずで失礼いたしました。
    いただいたソースで、IE9以降とその他ブラウザでは挙動確認できております。

    >分からないのはどの点でしょうか?

    案件の対象ブラウザであるIE8とIE7では addEventListener が適用されないため、
    代替としてattachEventを適用しようと試したのですが、
    うまく動かなかったため、その部分の記述が判らない、ということです。

    キャンセル

  • 2016/11/11 16:56

    Lhankor_Mhyさま

    >IE7+条件なんですね。お時間をいただきたく存じます。

    度々ありがとうございます。よろしくお願いいたします。

    キャンセル

  • 2016/11/11 17:55

    Lhankor_Mhyさま

    度々のご回答ありがとうございます。
    ご教示いただいたソースでIE7/IE8にて挙動確認できました。
    このたびは大変助かりました。深く感謝申し上げます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.39%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    21489questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。