javascriptでおみくじ＋cookie実装

###症状
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件

ベストアンサー

動かすだけなら、

javascript
1return function (node1, node2) {
2  var d = node1.ownerDocument;
3  
4  //...
5  
6  node2.src = unsei.src;
7  node2.alt = unsei.alt;
8  node1.innerHTML = unsei.innerHTML;
9};

として、

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

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

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

HTML
1<input type="button" id="btn" value="おみくじを引く">

javascript
1document.getElementById('btn').addEventListener('click', function(){
2  omikuji(document.getElementById('resultTxt'), document.getElementById('resultImg'));
3},false);

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

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

#####追記
コメントを受けまして。

javascript
1var btn = document.getElementById('btn');
2var btnClickEvent = function(){
3  omikuji(document.getElementById('resultTxt'), document.getElementById('resultImg'));
4};
5if (btn.addEventListener){
6  btn.addEventListener('click', btnClickEvent, false);
7} else if (btn.attachEvent){
8  btn.attachEvent('onclick', btnClickEvent);
9}

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

参考：

古い Internet Explorer と attachEvent

EventTarget.addEventListener - Web API インターフェイス | MDN

投稿2016/11/11 03:17

編集2016/11/11 08:17

Lhankor_Mhy

総合スコア36115

ala_mar

2016/11/11 05:52

Lhankor_Mhyさまご回答ありがとうございます。 onclick属性を廃止し、無事に挙動確認することができました。ただひとつ問題が残っており、対象ブラウザがIE7以上のため、 addEventListener が適用されません。 http://js.studio-kingdom.com/javascript/event_target/add_event_listener 上記サイト等を参考に、代替としてattachEventを使用するということまでは判ったのですが、うまく動作せず… ソースをご教示いただけますと幸いです。

Lhankor_Mhy

2016/11/11 06:07

ソースはすでにご提示しています。分からないのはどの点でしょうか？なお、attachEventは古いバージョンのIEの独自仕様なので、現在はほぼ使われていないと思います。

Lhankor_Mhy

2016/11/11 07:43

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

ala_mar

2016/11/11 07:46

Lhankor_Mhyさま＞ソースはすでにご提示しています。言葉足らずで失礼いたしました。いただいたソースで、IE9以降とその他ブラウザでは挙動確認できております。＞分からないのはどの点でしょうか？案件の対象ブラウザであるIE8とIE7では addEventListener が適用されないため、代替としてattachEventを適用しようと試したのですが、うまく動かなかったため、その部分の記述が判らない、ということです。

ala_mar

2016/11/11 07:56

Lhankor_Mhyさま＞IE7+条件なんですね。お時間をいただきたく存じます。度々ありがとうございます。よろしくお願いいたします。

ala_mar

2016/11/11 08:55

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

行動規範の内容に同意します