- 締切済み
javascriptで困っています
初心者webプログラマーです javascriptでエンドロールのようなものを作ろうとしています。以下の１つのhtmlファイルで作ると動くのですが <html> <head> <title>エンドロール</title> <style type="text/css"> #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } </style> </head> <body onLoad="setInterval('endroll()', 50);"> <script type="text/javascript"> var y = 320; function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } </script> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> これを、htmlファイル、cssファイル、jsファイルに分けてつくると、動かなくなります-----index.html---------------------------------------------------------------------- <html> <head> <link rel="stylesheet" href="endroll.css" type="text/css" /> <script src="endroll.js"></script> <title>エンドロール</title> </head> <body> <div id="container"> <div id="txt"> aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbb ccccccccccccccccccccc ddddddddddddddddddddd eeeeeeeeeeeeeeeeeeeee fffffffffffffffffffff ggggggggggggggggggggg hhhhhhhhhhhhhhhhhhhhh iiiiiiiiiiiiiiiiiiiii </div> </div> </body> </html> -------endroll.css--------------------------------------------------------------- @charset "utf-8"; #txt{ position: absolute; top: 320px; } #container{ width:320px; height:320px; position:relative; top:0px; left:0px; overflow:hidden; } ---------endroll.js-------------------------------------------------------------- window.onload = function(){ start_endroll(); } var y = 320; // 繰り返し処理の内容 function endroll(){ document.getElementById("txt").style.top = y; y -= 2; if(y<-400){y=320} } // 繰り返し処理の開始 function start_endroll() { timerID = setInterval('endroll()',50); } いろいろ調べてみたのですが、解決できませんでした。長い質問になりましたが、どなたか教えていただければありがたいです。よろしくお願いします。
- dkong
- お礼率86% (170/197)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ss-ak
- ベストアンサー率58% (23/39)
厳密に言えば、少し誤っていると思われる部分や「こう書いた方が良い」と思われる部分が幾つか気になりましたが、「ファイルを分けた」という原因で、動作する／しないに影響が出るものではないと思われます。 当方の環境で、投稿されたコードを実行させてみましたが、IE9、Chromeとも、ファイル分割後のバージョンも普通に動作しました。 まさか、とは思いますが、3つのファイル(HTML、CSS、JavaScript)を同一フォルダに置いていないとか？ あとは、考えられるとしたら、HTTPサーバの設定や、Webサーバ上でのファイルのアクセス権設定に何らかの原因がある、などでしょうか。 「動かなくなる」とは、どのような環境で、具体的に、どのような症状になるのでしょうか。 原因を絞り込むためには、次のようなことを試してみると良いかと思います。 ■3つのファイルを、ローカル環境上の同一フォルダに置き、実行させてみる。 ローカル環境でJavaScriptを実行させようとすると、ブラウザの警告が表示される場合がありますが、今回は自作の、特に害はないと思われるJavaScriptコードを実行させる事が判っているので、実行を許可して良いでしょう。 ローカル環境ならば動くのであれば、サーバ側でのファイルのアクセス権、あるいはHTTPサーバの設定が疑われます。 ■ファイルを分けたCSS、JavaScriptがブラウザに正しく読み込まれ解析されているか確認する。 最近のブラウザ(IE、Chrome、Firefox等)では、「開発者ツール」「デベロッパーツール」等という名称の、デバッグ機能が内蔵ｄされています(FireFoxではFireBugというデバッグツールの導入が必要かもしれません)。 これらを使うと、HTMLを読み込んだ後に、CSSとJavaScriptファイルが読み込まれ、有効になっているかを確認できますし、デバッガの機能がありますから、原因調査にかなり役立ちます。
