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

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

ただいまの
回答率

88.04%

Mathオブジェクト、画像変更の問題

解決済

回答 2

投稿

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

score 177

こんにちは!
JavaScrippt特訓中のものです!!

現在、2つのサイコロのイメージを変換する問題に
(http://www.cutt.co.jp/book/anser818/anser26_2.html)
取り組んでいるのですが、
どうしてもdocument.imageエラーになってしまいます。

下記のURLを参照に解き直してみたのですが、
さっぱりで・・・
http://www.marguerite.jp/Nihongo/WWW/JavaScript/Object-Image.html

基礎的な質問で恐縮ですが、
アドバイスいただければ幸いでございます。

どうぞよろしくお願いいたします。

<body>
    <h2>2つのサイコロ</h2>
    <p>ボタンをクリックすると、2つのサイコロを振ることができます。</p>
    <p><img src="sai_1.gif">&nbsp;<img src="sai_6.gif"></p>
    <p><input type="button" value="サイコロを振る" id="dice">
    
    <script>
        document.getElementById('dice').onclick = function() {
            dice();
        }
        
        /*
        function dice() {
            var    dices = ['<img src="sai_1.gif">', '<img src="sai_2.gif">', '<img src="sai_3.gif">', '<img src="sai_4.gif">', '<img src="sai_5.gif">', '<img src="sai_6.gif">'];
            var    saikoro = Math.floor(Math.random() * dices.length);
        }
        */
        
        function dice() {
            var    a = Math.random() * 6;
            var    b = Math.random() * 6;
            a = Math.ceil(a);
            b = Math.ceil(b);
            
            img = new Image();
            img.src = "sai_" + a + ".gif";
            img.src = "sai_" + b + ".gif";
            
            document.img(0).src = img.src;
            document.img(1).src = img.src;
        }
    </script>
</body>
</html>

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

本題とは異なりますが少し情報が古いように思えます。
アドバイスが欲しいとのことですのでいくつか指摘させていただきます。
(私も日々学習中の身ですが)

//まずインデントがめちゃくちゃなのが気になりますよね

/*
現在onclickでのイベントセットは推奨されていません
addEventListener()の使用を推奨します(但し古いIEではattachEvent()を使用する必要がある)
*/
document.getElementById('dice').onclick =dice;

function dice() {
/*
  6がマジックナンバーになっているのでDICE_MAX_NUMBERのような
  定数(として扱う物)を作成して代入しておくべきかと
*/
  var rn1 = Math.ceil(Math.random() * 6);
  var rn2 = Math.ceil(Math.random() * 6);

/*
  これは良くないですね
  varを付けずに変数を宣言するとグローバル空間に変数を宣言してしまいます
  なおかつimgという如何にも他のもの(JS,HTML,CSS)とぶつかりそうな名前を付けると
  かなり問題になりますね
  また参考としているURLを見た限り、この処理は無駄であると言えます
  文字列を成型するだけで十分ですね
  (imageオブジェクトを作る必要はない)
  "sai" + rn1 +".gif"となる文字列を作成できればいいわけです
  またここにはもう一つ問題があります
*/
  img = new Image();//var imgとすべき
  //以下2行です
  //これは同じものに代入していますから1行目の処理は何の意味も果たしません
  img.src = "sai_" + a + ".gif";
  img.src = "sai_" + b + ".gif";//上書きしている

  /*
    以下も大きな問題点です
    document.imgメソッドは存在しません
    質問者の方が行いたいのはdocument.images[0].srcです
    またそもそもdocument.imagesを使用して今回のようなものを作成するのは
    学習用のサンプルとしてしか使用できない手法です
    この方法ですと他に画像が存在した場合
    バグが発生するリスクが限りなく100%に近いでしょう
    (つまり学習用としてはサンプルが悪いということになりますが……)
    サイト内のすべての画像への処理とかならわからなくはないんですけどね
  */
  //一応オリジナルに従うと
  document.img(0).src = img.src;//document.images[0].src="sai"+rn1+".gif"となるべき
  document.img(1).src = img.src;//document.images[0].src="sai"+rn2+".gif"
  //という感じですね
} 

以下はおまけとして適当に書きなおしたものを参考程度に。

//imageタグにidを設定しているものとする
//サイコロを振るボタンのidはdice_roll
//それぞれdice1_img dice2_imgとする
//bodyの閉じタグ前に挿入する想定

(function (_window,_document){//この記述を即時関数と呼ぶことが多い
  //dice info
  var IMAGE_NAME="sai";
  var IMAGE_EXTENSION=".gif";
  var DICE_MAX_NUMBER=6;

  //Elements
  var DICE_ROLL_BUTTON=_document.getElementById("dice_roll");
  var DICE1=_document.getElementById("dice1_img");
  var DICE2=_document.getElementById("dice2_img");

  function getRandomNumber(_Number){
      return Math.ceil(Math.random()*_Number);
  };
  function changeImage(_TargetElement,_src){
      _TargetElement.src=_src;
  };
  function createImageName(){
    return IMAGE_NAME+getRandomNumber(DICE_MAX_NUMBER)+IMAGE_EXTENSION;
  };
  function dice(_TargetElement){
      if(!_TargetElement){
          return;
        }
      var _src=createImageName();
      changeImage(_TargetElement,_src);
  };

  function main(){
      dice(DICE1);
      dice(DICE2);
  };

  if(_window.addEventListener){
      DICE_ROLL_BUTTON.addEventListener("click",main,false);
      return;
  }
  DICE_ROLL_BUTTON.attachEvent("onclick",main);
}(window,document));
動作確認してませんがきっと動くはず(願望)
ちなみにこのコードも綺麗とは言えないと思います。


まず変数や配列、オブジェクトなど基本的な文法やルールなどの復習をしてみた方がいいかと思います。
現状はよくわからないけど弄ってみたというようなコードになっていますので。
勿論それも勉強の中で発見があったりするのですが今回のようにちぐはぐになることもありますから。
あと余談として現在jsは別ファイルに記述してリンクする形が一般的になっています。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/06/04 15:17

    Cf_cwd様

    ご回答いただき、またアドバイスも数多く頂きまして
    誠にありがとうございます。
    資料が古く、また基礎の整理もできないまま進んだこと反省です。

    これを機会に再度精進し直します!
    ほんとうにありがとうございます!!

    キャンセル

0

「document.imageがエラーになる」点について

document.img(0).src = img.src; 
document.img(1).src = img.src; 
document.img というプロパティは存在しないです
正しい記述を調べてみてください

また、

img = new Image(); 
img.src = "sai_" + a + ".gif";  //(A)
img.src = "sai_" + b + ".gif";  //(B)

これではsrcに入れた(A)の内容が(B)で上書きされる点も注意
このままだと2つのダイスが常に同じ(B)の画像で表示されますね

以上の点を書き直せば、とりあえずは意図した通りに動くようになると思います

がんばってください

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/06/04 15:14

    takito様

    ご回答頂きまして、誠にありがとうございます。
    大変感謝いたします。
    ご丁寧にご指導いただきまして、助かりました!

    キャンセル

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

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

関連した質問

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