外部JSファイルが読み込まない

このQ&Aのポイント
  • 二日目の初心者がjsファイルを使って画像をIEで表示させる方法を教えてください
  • htmlファイルで外部JSファイルを読み込んで画像を表示させる方法がわかりません
  • JavaScriptを有効にして画像を表示させる方法を教えてください
回答を見る
  • ベストアンサー

外部JSファイルが読み込まない。

javascriptの勉強をし始めて、二日目の初心者です。 jsファイルを使って、画像をIEで表示させたいのですが、上手く読み込んでくれません。 どうか、教えてください。 ---html----------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4,01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="common.js" type=text/javascript" charset="UTF-8"> </script> <script src="showImage2.js" type="text/javascript" charset="UTF-8"> </script> <title>キャラクターの表示</title> </head> <body onlaod="main()"> <noscript>JavaScriptを有効にしてください</noscript> </body> </html> ----js------------------------------------------------------------------------------ var img; function main() { img=document.createElement("img") document.body.appendChild(img); img.src="pcStay.png"; } ------------------------------------------------------------------------------------

質問者が選んだベストアンサー

  • ベストアンサー
  • DOUGLAS_
  • ベストアンサー率74% (397/534)
回答No.1

 「javascriptの勉強をし始めて、二日目の初心者」とは思えないような、難しい コード をお勉強していらっしゃるようですが、とりあえず、 type=text/javascript" →  type="text/javascript" body onlaod → body onload でいかがでしょうか?

n_peace627
質問者

お礼

表示されました! お答え頂きまして有り難うございます! ケアレスミスでした。。 気をつけます。

その他の回答 (1)

  • 4017B
  • ベストアンサー率73% (1304/1775)
回答No.2

質問が焦りすぎですね。 <script src="common.js" type=text/javascript" charset="UTF-8"></script> <script src="showImage2.js" type="text/javascript" charset="UTF-8"></script> ~とあるのに、例文にはJS?が1つしかありませんね?? それにこれだけだと、JSが読み込めてないのか、画像が読み込めてないのか、はっきりしませんね。 それ以外は概ね、No.1の方と同意見です(笑)。 P.S. 外部JSを使うのなら、HTML内に「onload」を記述するのではなく。直接JSファイルの方に「window.onload = function(){~};」と書いておく方が無難ですかね?

n_peace627
質問者

お礼

ケアレスミスでした。。。 こんな質問にも答えて頂きまして有り難うございます!

関連するQ&A

  • 外部ファイルJS参照を全て消さないと「文字が正しくありません」エラー

    実に不思議なのですが、 以下のように4つのJSファイルをインクルードしているHTMLファイルを ローカルで開くと「文字が正しくありません」とスクリプトエラーが何回かでます。 ですが、script1~4.js の行を全てコメントアウトすると、エラーはでません。 1~4のどれかにエラーが含まれているのかと、一つ一つを外してみましたが、 どの行を外しても、やはり「文字が正しくありません」と出てしまいます。 ローカルの然るべきパスに1~4はあります。また、HTML同様、JSもEUCになってます。 何が原因なのでしょうか? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <title>タイトル</title> <meta http-equiv="content-type" content="text/html; charset=euc-jp"> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"> <link href="../css/style.css" rel="stylesheet"> <script src="../js/script1.js" type="text/javascript"></script> <script src="../js/script2.js" type="text/javascript"></script> <script src="../js/script3.js" type="text/javascript"></script> <script src="../js/script4.js" type="text/javascript"></script> </head>

  • XHTMLで外部JSファイルを読み込むには?

    XHTMLで外部JSファイルを読み込むには? よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか?? アドバイス頂ければ幸いです。よろしくお願いいたします。

  • js 引用符

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <div id="a"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> $(function(){ var retinaSwitch = window.<span class="searchword">devicePixelRatio</span>; if(retinaSwitch == 1) { $('#container').html('Retinaディスプレイではありません'); } else if(retinaSwitch == 2) { $('#container').html('Retinaディスプレイです'); } }); </script> </body> </html> javascriptのコードなのですがWebサイトからコピペした文章が上手く反映されません。引用符関係のイージーミスだとは思うのですが、ちょっとドツボに嵌っているので、ご指摘頂ければと思います。

  • IEだけjsファイルを読み込まない指定

    よろしくお願いいたします。 IEだけに適用させたくないjsファイルがあり、 HTMLファイルの<head></head>内に、下記のように記述してみたのですが、 <!--[if !IE]> <script type="text/javascript" src="aaa.js"></script> <![endif]--> IEだけでなく他のすべてのブラウザで適用されなくなってしまいました。 書き方が間違っているのでしょうか・・? ソースは下記のようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="Description" content="あああ" /> <meta name="Keywords" content="あああ" /> <title>タイトル</title> <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" /> <link href="import.css" rel="stylesheet" type="text/css" media="all" /> <link rel="stylesheet" href="print.css" type="text/css" media="print" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <!--[if !IE]> <script type="text/javascript" src="aaa.js"></script> <![endif]--> 以下略 また、こちらのページを参考に記述いたしました。 http://blog.playunderworld.com/web/ie-conditional-comment/ もし原因をご存知でしたらお教えいただけたらと思います。 どうぞよろしくお願いいたします。

  • JSの記述を別ファイルに移す

    下記のHTML内の <script type="text/javascript">~</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>

  • moment.js

    moment.js moment.jsで秒の部分(17:00:「00」)を削るにはどうしたら良いでしょうか? 以下ソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> var now = moment(); console.log(now.toDate()); // Dateオブジェクトが返される // 文字列からも生成できるし var shougatsu = moment('2015-01-01'); console.log(shougatsu.toString()); // "Thu Jan 01 2015 00:00:00 GMT+0900" // もちろんDateオブジェクトからも生成できる var kodomonohi = moment(new Date('2015-05-05')); console.log(kodomonohi.toString()); // "Tue May 05 2015 09:00:00 GMT+0900" </script> </body> </html> コンソールログで表示をしているのですが何時何分何秒の「秒」の部分を非表示にしたい場合どうしたら良いでしょうか?

  • javascriptのalertで文字化けが解消されません。(外部js

    javascriptのalertで文字化けが解消されません。(外部jsファイル読込による) htmlファイル <meta http-equiv="Content-Script-Type" content="text/javascript"> <script language="JavaScript" src="**/**.js" charset="shift_jis"></script> いろいろ調べまして、charset="shift_jis"を指定したり、utf-8にしましたがうまくいきません。 jsファイル function testalert() { alert('テスト'); } ご教授をよろしくお願いします。

  • jqueryについて質問です。

    jqueryについて質問です。 過去こちらにお世話になりまして、一つの質問を解決していただきました。 しかしまた、わかったつもりになっていただけのようでして、再度問題が出てしまいました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <link rel="stylesheet" type="text/css" href="main.css"></link> <script type="text/javascript" src="accordian.pack.js" charset="UTF-8"></script> <script type="text/javascript" src="jquery-1.3.2.min.js" charset="UTF-8"></script> <script type="text/javascript" src="smartsticky.js" charset="UTF-8"></script> <script type="text/javascript"> jQuery.noConflict(); jQuery(document).ready(function(){      new Accordian('basic-accordian',5,'header_highlight'); }); </script> このように記述しましたが、どちらも作動しないという状態になってしまいました。 smartsticky.jsが、元々は<SCRIPT>内に書かれていたものを、まとめて外部に出したような感じだとは思うのですが、それに対しての対処が思いつきません。見ての通りjQuery.noConflict();を使っても見たのですが、まるで効果なしです・・・ accordian.pack.jsとsmartsticky.jsをバッティングさせずに上手く同時に動かす手段はありますでしょうか? ちなみにこのページのscript自体はこの記事をのものです。 組み込みもこの記事を参考に行っています。 http://solidstate.jp/ContentsDisplay/floatingBox/script_147.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html

  • Javascriptの外部サーバーからの読み込み(greybox)

    いつも参考にさせていただいてます。 greyboxを使ってページを表示したいのですが、 使っているサーバーはjsファイルなどがアップロードできない、CMSサービスのサイトなので、 別のレンタルサーバーにアップロードしたjsファイルを読み込んで動かしたところうまくいきません。 模範例では、 ----------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "./greybox/"; // --></script> <script type="text/javascript" src="greybox/AJS.js"></script> <script type="text/javascript" src="greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/gb_scripts.js"></script> </head> <body> <h1>GreyBox サンプル</h1> <a href="http://job.mycom.co.jp/" title="job" rel="gb_page[480,360]"> 毎日就職ナビのページ表示 </a> </body> </html> ----------------------------------- なのですが、パスを絶対パスに変えて ----------------------------------- <link rel="stylesheet" href="http://mydomain/greybox/gb_styles.css" type="text/css" media="all"> <script type="text/javascript"><!-- var GB_ROOT_DIR = "http://mydomain/greybox/"; // --></script> <script type="text/javascript" src="http://mydomain/greybox/AJS.js"></script> <script type="text/javascript" src="http://mydomain/greybox/AJS_fx.js"></script> <script type="text/javascript" src="greybox/http://mydomain/gb_scripts.js"></script> ----------------------------------- と変更しました。 成功例(jsファイル同一サーバー上):http://greybox.main.jp/test_ng/index2.html 失敗例(jsファイル別サーバー上):http://greybox.main.jp/test_ok/index1.html 対応方法をお教え下さい。よろしくお願い致します。

  • bxsliderが動かない

    Javascript初心者なのですが、自分のサイトにbxsliderを置きたいと思っています。 試しに白紙のHTMLファイルに以下のように記述してみました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxslider({ auto: true, }); }); </script> </head> <body> <ul class="bxslider"> <li><img src="images/pic1.jpg"></li> <li><img src="images/pic2.jpg"></li> <li><img src="images/pic3.jpg"></li> <li><img src="images/pic4.jpg"></li> </ul> </body> </html> jsやcssの場所は正しいです。 しかし、表示してみると画像が4枚縦に並んで表示されるだけとなってしまいます。 Firefox, Chrome、IEの各最新版で試しましたが同様でした。 どの部分が間違っているのでしょうか?ご教授お願いします。

専門家に質問してみよう