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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

解決済

2回答

1804閲覧

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

yamady

総合スコア176

JavaScript

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

0グッド

0クリップ

投稿2015/06/03 18:24

こんにちは!
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>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

lang

1document.img(0).src = img.src; 2document.img(1).src = img.src;

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

また、

lang

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

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

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

がんばってください

投稿2015/06/04 02:13

takito

総合スコア3111

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamady

2015/06/04 06:14

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

0

ベストアンサー

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

lang

1//まずインデントがめちゃくちゃなのが気になりますよね 2 3/* 4現在onclickでのイベントセットは推奨されていません 5addEventListener()の使用を推奨します(但し古いIEではattachEvent()を使用する必要がある) 6*/ 7document.getElementById('dice').onclick =dice; 8 9function dice() { 10/* 11 6がマジックナンバーになっているのでDICE_MAX_NUMBERのような 12 定数(として扱う物)を作成して代入しておくべきかと 13*/ 14 var rn1 = Math.ceil(Math.random() * 6); 15 var rn2 = Math.ceil(Math.random() * 6); 16 17/* 18 これは良くないですね 19 varを付けずに変数を宣言するとグローバル空間に変数を宣言してしまいます 20 なおかつimgという如何にも他のもの(JS,HTML,CSS)とぶつかりそうな名前を付けると 21 かなり問題になりますね 22 また参考としているURLを見た限り、この処理は無駄であると言えます 23 文字列を成型するだけで十分ですね 24 (imageオブジェクトを作る必要はない) 25 "sai" + rn1 +".gif"となる文字列を作成できればいいわけです 26 またここにはもう一つ問題があります 27*/ 28 img = new Image();//var imgとすべき 29 //以下2行です 30 //これは同じものに代入していますから1行目の処理は何の意味も果たしません 31 img.src = "sai_" + a + ".gif"; 32 img.src = "sai_" + b + ".gif";//上書きしている 33 34 /* 35 以下も大きな問題点です 36 document.imgメソッドは存在しません 37 質問者の方が行いたいのはdocument.images[0].srcです 38 またそもそもdocument.imagesを使用して今回のようなものを作成するのは 39 学習用のサンプルとしてしか使用できない手法です 40 この方法ですと他に画像が存在した場合 41 バグが発生するリスクが限りなく100%に近いでしょう 42 (つまり学習用としてはサンプルが悪いということになりますが……) 43 サイト内のすべての画像への処理とかならわからなくはないんですけどね 44 */ 45 //一応オリジナルに従うと 46 document.img(0).src = img.src;//document.images[0].src="sai"+rn1+".gif"となるべき 47 document.img(1).src = img.src;//document.images[0].src="sai"+rn2+".gif" 48 //という感じですね 49}

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

lang

1//imageタグにidを設定しているものとする 2//サイコロを振るボタンのidはdice_roll 3//それぞれdice1_img dice2_imgとする 4//bodyの閉じタグ前に挿入する想定 5 6(function (_window,_document){//この記述を即時関数と呼ぶことが多い 7 //dice info 8 var IMAGE_NAME="sai"; 9 var IMAGE_EXTENSION=".gif"; 10 var DICE_MAX_NUMBER=6; 11 12 //Elements 13 var DICE_ROLL_BUTTON=_document.getElementById("dice_roll"); 14 var DICE1=_document.getElementById("dice1_img"); 15 var DICE2=_document.getElementById("dice2_img"); 16 17 function getRandomNumber(_Number){ 18 return Math.ceil(Math.random()*_Number); 19 }; 20 function changeImage(_TargetElement,_src){ 21 _TargetElement.src=_src; 22 }; 23 function createImageName(){ 24 return IMAGE_NAME+getRandomNumber(DICE_MAX_NUMBER)+IMAGE_EXTENSION; 25 }; 26 function dice(_TargetElement){ 27 if(!_TargetElement){ 28 return; 29 } 30 var _src=createImageName(); 31 changeImage(_TargetElement,_src); 32 }; 33 34 function main(){ 35 dice(DICE1); 36 dice(DICE2); 37 }; 38 39 if(_window.addEventListener){ 40 DICE_ROLL_BUTTON.addEventListener("click",main,false); 41 return; 42 } 43 DICE_ROLL_BUTTON.attachEvent("onclick",main); 44}(window,document));

動作確認してませんがきっと動くはず(願望)
ちなみにこのコードも綺麗とは言えないと思います。

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

投稿2015/06/03 19:50

編集2015/06/17 01:10
Cf_cwd

総合スコア730

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamady

2015/06/04 06:17

Cf_cwd様 ご回答いただき、またアドバイスも数多く頂きまして 誠にありがとうございます。 資料が古く、また基礎の整理もできないまま進んだこと反省です。 これを機会に再度精進し直します! ほんとうにありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問