Q&A
（質問文は編集できます）質問文のHTML/JavaScriptはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
前提・実現したいこと
javascriptファイルを別に作って画像を切り替えたいです。
発生している問題・エラーメッセージ
HTMLの中で<script>タグを使っていたときはうまく切り替わっていたのですが、javascript部分をコピペして別ファイルにしたら動かなくなりました。
エラーメッセージ
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <img id="mypic" src="img/image1.jpg" width="100%" alt="中華の画像"></html><!-- <script> let pics_src = new Array("img/image1.jpg","img/image2.jpg","img/image3.jpg"); let num = -1; slideshow_timer(); function slideshow_timer(){ if (num == 2){ num = 0; } else { num ++; } document.getElementById("mypic").src=pics_src[num]; setTimeout("slideshow_timer()",2000); } </script> --> <script type="text/javascript" src="main.js"></script> </body>
javascript
1let pics_src = new Array("../img/image1.jpg","../img/image2.jpg","../img/image3.jpg"); 2let num = -1; 3 4slideshow_timer(); 5 6function slideshow_timer(){ 7 if (num == 2){ 8 num = 0; 9 } 10 else { 11 num ++; 12 } 13 document.getElementById("mypic").src=pics_src[num]; 14 setTimeout("slideshow_timer()",2000); 15}
試したこと
画像の相対パス名を変える
補足情報（ファイルのツリー構造）
「testフォルダ」の中に「imgフォルダ」「jsフォルダ」「index.htmlファイル」があります。画像は「imgフォルダ」内にあります。
type="text/javascript"っていうところを消せばいけそうな気がしますが...
ブラウザ( InternetExplorer, Firefox, GoogleChrome ... )は何をお使いでしょうか?
もしお使いのブラウザっていうのがわからないなら、
「Windowsで何もインストールせずにやっている」等のような感じでもいいので書いてください。(本文に)
また、kei344さんのおっしゃるようにやってみてください。
htmlと同階層にないのに名前だけ書いてては使えるようになるはずもないよーな気がするのはわたしだけでしょーか。
回答2件
0
jsでもCSSでもphpでもなんでもですが、外部ファイルに処理を切り出したときに絶対に最初にやるべきこと第１位
実行してすぐに確認できる超簡単な記述を１つだけ書いて動作確認
をやりましょう。
いきなり全部移行しても動かなかったときに問題の切り分けに困るだけです。
jsならalert(1);とかcssならbody{background-color:red;}とかphpならecho 1;とか（1だと何か被るかもしれないのでファイル名でも良いですけど）
これできちんとその書いた内容が確認できれば「利用可能」ということが分かりますし、確認できれば「ファイルのパスがあってない？」「そもそもファイルを置いてない？」「ファイルが破損してる？」と問題の切り分けができます。
js、CSS、画像であればブラウザの開発ツールを見れば「そんなファイルねーよ！」って怒ってくれます（実際には「指定されたファイルは見つかりません」といった旨の404エラーですが）。
いずれにしてもデバッグは覚えましょう。
「言語名 デバッグ方法」とかで検索すればその言語にあったデバッグ方法を紹介する記事が出てきます。
投稿2019/04/18 04:03
総合スコア80861
0
ベストアンサー
同じ階層にmain.jsを作成したのなら、画像へのパスを変えなくても良いはずですよ。
JSファイルが見つからない、もしくは画像が見つからないのどちらかだと思います。
ディレクトリ構造の問題のような気がします、
追記：
補足情報に気がつきました。
JSファイルへのパスが間違っています。
html
1<script type="text/javascript" src="js/main.js"></script>
投稿2019/04/18 02:40
編集2019/04/18 02:45
総合スコア3404
多分これですね。
デベロッパーツール開いてネットワークタブとかコンソールタグとか見れば
画像ファイルの読み込みに失敗してたり、何かしらのエラーが出てると思うのでそれを確認しろ案件でしょうね。
ありがとうございました。勉強になりました！
あなたの回答
tips
プレビュー
