こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

javascriptで困っています

初心者webプログラマーです
javascriptでエンドロールのようなものを作ろうとしています。以下の1つの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);
}

いろいろ調べてみたのですが、解決できませんでした。長い質問になりましたが、どなたか教えていただければありがたいです。よろしくお願いします。

投稿日時 - 2012-11-23 09:58:37

QNo.7811485

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(1)

ANo.1

厳密に言えば、少し誤っていると思われる部分や「こう書いた方が良い」と思われる部分が幾つか気になりましたが、「ファイルを分けた」という原因で、動作する/しないに影響が出るものではないと思われます。

当方の環境で、投稿されたコードを実行させてみましたが、IE9、Chromeとも、ファイル分割後のバージョンも普通に動作しました。

まさか、とは思いますが、3つのファイル(HTML、CSS、JavaScript)を同一フォルダに置いていないとか?

あとは、考えられるとしたら、HTTPサーバの設定や、Webサーバ上でのファイルのアクセス権設定に何らかの原因がある、などでしょうか。

「動かなくなる」とは、どのような環境で、具体的に、どのような症状になるのでしょうか。
原因を絞り込むためには、次のようなことを試してみると良いかと思います。

■3つのファイルを、ローカル環境上の同一フォルダに置き、実行させてみる。

ローカル環境でJavaScriptを実行させようとすると、ブラウザの警告が表示される場合がありますが、今回は自作の、特に害はないと思われるJavaScriptコードを実行させる事が判っているので、実行を許可して良いでしょう。

ローカル環境ならば動くのであれば、サーバ側でのファイルのアクセス権、あるいはHTTPサーバの設定が疑われます。

■ファイルを分けたCSS、JavaScriptがブラウザに正しく読み込まれ解析されているか確認する。

最近のブラウザ(IE、Chrome、Firefox等)では、「開発者ツール」「デベロッパーツール」等という名称の、デバッグ機能が内蔵dされています(FireFoxではFireBugというデバッグツールの導入が必要かもしれません)。
これらを使うと、HTMLを読み込んだ後に、CSSとJavaScriptファイルが読み込まれ、有効になっているかを確認できますし、デバッガの機能がありますから、原因調査にかなり役立ちます。

投稿日時 - 2012-11-23 21:34:49

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-