JavaScriptで初めてOOPを試したところうまくいきません。どこがおかしいのでしょうか?
img要素をアニメーション的に移動させたいと思っており、次のようにコンストラクタとprototypeを使ってクラスを作成し、インスタンスを生成して最下部の関数をイベントハンドラで呼び出してみるのですが実行されません。
//コンストラクタ
function Box(emID,targetX,targetY,speed,timer){
this.element=getElementById("emID");
this.targetX=targetX; //移動先の座標
this.targetY=targetY;
this.speed=speed;
this.timer=timer*1000;
}
//現在の座標取得
Box.prototype.currentXY=function(){
this.currentX=eval(this.element.style.left.replace("px",""));
this.currentY=eval(this.element.style.top.replace("px",""));
}
//移動先までのXY値を徐々に加算
Box.prototype.loopContents=function(){
if(this.currentX<=targetX-0.3 || this.currentY<=targetY-0.3){
this.currentX += (targetX-currentX)/speed;
this.element.style.left = this.currentX+"px";
this.currentY += (targetY-currentY)/speed;
this.element.style.top = this.currentY+"px";
}
else{
clearTimeout();
}
}
//加算を繰り返す
Box.prototype.runLoop=function(){
setTimeout(this.loopContents(),10);
}
//実行関数
function move(emID,targetX,targetY,speed,timer){
alert(emID+"and"+targetX+"and"+targetY+"and"+speed+"and"+timer); //(1)
var mover = new Box(emID,targetX,targetY,speed,timer);
window.alert("check"); //(2)
mover.currentXY(); //現在のXYを取得
setInterval(mover.runLoop(),mover.timer);
}
alertで検査してみるのですが(1)ではemIDの箇所は[object HTMLImageElement]と表示されます。これは問題ないのでしょうか?
また(2)のalertは機能しないようです。
どこがどう設計ミスなのか全くわからず困っています。
No.2ベストアンサー
- 回答日時:
最初の呼び出し方をどのようにしているのか不明ですが…
・emIDがid(文字列)であるのなら、Boxの
this.element=getElementById("emID"); は""が不要では?(No1様が指摘済み)
>(1)ではemIDの箇所は[object HTMLImageElement]と表示されます
それだと、emIDはid(文字列)ではなく、image要素みたいだけれど、最初に何を渡しているのだろう?
・currentXYの中でevalを使う必要はなさそう
これは別に問題というわけではないけれど…
・loopContents内で
targetX、currentX、speed等がそのまま用いられているが、変数が未定義のはず。
this.~~ってつもりでは?
・clearTimeout(); ってidがないけれど…?
それに、おおもとのsetIntervalのほうはどうなるの?(ずっとループしっぱなし)
・setTimeout(this.loopContents(),10);
setInterval(mover.runLoop(),mover.timer);
はセンテンス実行時に各関数が評価されてしまいます。
時間を置いて実行する場合は引数に関数名を…
・↑を修正しても、繰り返し呼び出しには工夫が必要
(いまのところクロージャ的な方法しか思いつかない。)
ご回答ありがとうございます。
>最初の呼び出し方をどのようにしているのか不明ですが…
imgタグの中でonclick="move(box1,100,100,5,0.5);"と記述し呼び出しています。
box1は別のimg要素のidです。
このbox1がまずいんでしょうか。。
>・currentXYの中でevalを使う必要はなさそう
currentX,currentYを数値として扱いたいので文字列から変換しています。もっとスマートな方法があるのかもしれませんね。
>loopContents内で
targetX、currentX、speed等がそのまま用いられているが、変数が未定義のはず。
this.~~ってつもりでは?
ですね。恐縮です
>clearTimeout(); ってidがないけれど…?
それに、おおもとのsetIntervalのほうはどうなるの?(ずっとループしっぱなし)
setTimeout()からの戻り値をidにして引数に渡すんですね。
そもそもsetTimeout()は必要ないみたいでした。
>・setTimeout(this.loopContents(),10);
setInterval(mover.runLoop(),mover.timer);
はセンテンス実行時に各関数が評価されてしまいます。
時間を置いて実行する場合は引数に関数名を…
・↑を修正しても、繰り返し呼び出しには工夫が必要
(いまのところクロージャ的な方法しか思いつかない。)
関数名を文字列にしておく必要があるということが判明したのですが、その理由として文字列にしないと各関数が評価されてしまうからという理解でいいんでしょうか。
一応直せるところは直してみたのですが、やはり動きません。
機構的に何か問題があるのでしょうか。
No.3
- 回答日時:
No.1、No.2の繰り返しになりますが。
this.element=document.getElementById("emID");
this.element=document.getElementById(emID);
この2行の違いはわかりますか?
それぞれのthis.elementには何が入ると思いますか?
> ・↑を修正しても、繰り返し呼び出しには工夫が必要
使い方(繰り返し呼び出しの方法)はパターン化していますので、工夫せずともほぼ解説サイトのコピーペーストで行けると思います。
setTimeout、setIntervalの両方を"無理に"使う必要はありません。
setTimeout、setInterval、clearTimeout、clearInterval
それぞれの使い方を再確認して下さい。
その際、setTimeout、setIntervalの戻り値にも注意して下さい。
> imgタグの中でonclick="move(box1,100,100,5,0.5);"と記述し呼び出しています。
> box1は別のimg要素のidです。
alert()で確認されたとおりです。
box1に何が入っているか再確認して下さい。
> Box.prototype.currentXY
結果オーライな感じがしますが、ノーコメントで。
loopContents()関数内で、ところどころ this. が抜けているようです。
ありがとうございます。
>this.element=document.getElementById("emID");
this.element=document.getElementById(emID);
この2行の違いはわかりますか?
それぞれのthis.elementには何が入ると思いますか?
上は()内が単なる文字列となり引数と対応しないのでundefined、下はemIDをidにもつ要素そのものが入るように思えます。
引数として代入される必要があり、なおかつ()内は文字列となる必要があるので、下のように記述して、引数'box1'を渡すという方法が良いと考えました。いかがでしょうか。
>使い方(繰り返し呼び出しの方法)はパターン化していますので、工夫せずともほぼ解説サイトのコピーペーストで行けると思います。
setTimeout、setIntervalの両方を"無理に"使う必要はありません。
クロージャでできないかと考えてみましたが、今の私には敷居が高く行き詰まりました。他の繰り返し呼び出しの方法を調べてみようと思います。
>setTimeout、setInterval、clearTimeout、clearInterval
それぞれの使い方を再確認して下さい。
その際、setTimeout、setIntervalの戻り値にも注意して下さい。
戻り値をclear~()に渡すということですね。set~()の第1引数の形式についてまだ理解不十分な点があります。
>alert()で確認されたとおりです。
box1に何が入っているか再確認して下さい。
引数にbox1を渡し、alert(emID);で見ると[object ~]と出るのでこれはimgオブジェクトそのものが入っているという解釈でいいのでしょうか。
一方'box1'を渡すとそのままbox1とalert()で返されるので、これは単なるid名ということになるということでしょうか。
this.の抜けやemIDの箇所、set~の第一引数をfunction(オブジェクトメソッド){}にするなど修正し、setInterval()1つのみを使って単純に動作させることには成功しました。
もともとsetTimeout()で一定時間後にアクションをスタートさせ、アクションにはsetInterval()を使うという機構を考えていましたが、関数が3重に入れ子になってしまったためにうまくいかなかったということが分かってきました。
だいぶ打開されてきましたがもう少し試行錯誤してみます。
No.1
- 回答日時:
何のブラウザでチェックしているのかわかりませんが、最近のブラウザにはコンソールがあるのでエラーメッセージを確認してみてください。
下記行でエラーが発生します。
this.element=getElementById("emID"); // Uncaught ReferenceError: getElementById is not defined
# マルチポストのようなので、URLを記載しておきます。
JavaScriptで初めてOOPを試したところうまくいきません。どこがおかしいのでしょう... - Yahoo!知恵袋
http://detail.chiebukuro.yahoo.co.jp/qa/question …
ご回答頂きありがとうございます。
確かにまずエラーコンソールでチェックしてみるべきですね。
getElementById("emID")の前にdocument.を付け、他のエラーも修正してみましたが、やはり動作しません。もう少し粘ってみようと思います。
もし他にアドバイスがありましたらお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【お題】絵本のタイトル
- ・【大喜利】世界最古のコンビニについて知ってる事を教えてください【投稿~10/10(木)】
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・ハマっている「お菓子」を教えて!
- ・最近、いつ泣きましたか?
- ・夏が終わったと感じる瞬間って、どんな時?
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
PowerPointで時計表示
-
ラベルの色がかわってくれない
-
JavaScriptで初めてOOPを試した...
-
JSPの処理の途中で、JavaScript...
-
アクセスのフォームでタイマー...
-
デザイン時のVisible=Falseは実...
-
VBAについて
-
PowerBuilderのDOUBLEデータ型...
-
VBAでWEBのリンクをクリック...
-
jQueryで行う初期表示処理について
-
VB.netでタイマーがスタートし...
-
VBA 図形を塗りつぶし無しにす...
-
PHPとjquery
-
C#でボタン名を変更しても動く
-
正整数の半角数字かどうか判定する
-
IEで見ると「構文エラー」にな...
-
VB.NETからWEBブラウザの操作に...
-
PDFフォームで条件つき金額を表...
-
文字認証の問題
-
六曜カレンダー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
〔Excel:VBA〕マクロの実行が異...
-
JSPの処理の途中で、JavaScript...
-
if(1){...}とはどういうことで...
-
デザイン時のVisible=Falseは実...
-
初心者です。gulpでコンパイル...
-
C#でボタン名を変更しても動く
-
PowerPointで時計表示
-
jQuery ui Datepicker 明日以降...
-
1つのVBAコードをすべてのコア...
-
リクエスト結果が一瞬しか表示...
-
Excel VBA にて JavaScript の...
-
VBA ステータスバー DoEvents
-
Excelのマクロ一括実行ができな...
-
VBA SORT Applyでエラー
-
JavaScriptでショートカットキ...
-
innerHTMLなどの反映タイミング
-
既存のwebサイトで、ローカルの...
-
OnTime を使って、分間隔で実行...
-
2回目のSortメソッドが失敗~20...
-
resizeToメソッドが動作しません
おすすめ情報