• 締切済み

JavaScriptを使ってWebページにメッセージを表示させる

html内に<div id="info"></div>と書き、それをjavascriptのプログラムから「こんにちは」というメッセージを表示させるようにしたいのですが、何度試しても製作途中の段階でdocument.getElementById(id) has no propertiesというエラーが出てしまいます。（←Firebugでエラーが検出されます） どこが間違っているのか教えていただけると助かります。 ================= HTML ================= <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr"> <head> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>map</title> <link rel="stylesheet" type="text/css" href="common/css/main.css" /> <script src="common/js/main.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="info"></div> </body> </html> ================= JavaScript ================= var map window.onload = function() { load(); } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } _d("info","こんにちは");

みんなの回答

  • Werner
  • ベストアンサー率53% (395/735)
回答No.2

window.onload = function() {/*...*/} は無名関数を代入してるわけだから別に間違ってるわけではない。 質問文で動かないのは関数_dの実行タイミングが悪いんだと思う。 _dが実行されたとき<div id="info"></div>がまだ存在してない(描画されてない)から動かない。 > window.onload = function() { > _d("info","こんにちは"); > } のようにしたら動くと思うよ。

  • auty
  • ベストアンサー率58% (284/486)
回答No.1

掲載されているHTMLとJavaScriptが1つのファイルに含まれるとして考えて見ます。 ・　window.onload を使う場合、実行する関数名のみを設定します。 　　　　window.onload = load; 　　　　function load() { 　　　　　　_d("info","こんにちは"); 　　　　} ・　<body>タグを使うとき、 　　　 <body onload='_d("info","こんにちは");'> したがって、window.onloadの場合、以下のようになります。 -------------------------------------------------------------------- <script type="text/javascript"> <!-- window.onload = load; function load() { _d("info","こんにちは"); } function _d(id, htmlTxt) { document.getElementById(id).innerHTML = htmlTxt; } //--> </script> </head> <body> <div id="info"></div> </body>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • Ｔｈｉｃｋｂｏｘに表示されたページのアドレスを取得できないでしょうか？

    お世話になります 入力されたアドレスが実在するか調べたいのですがThickboxに表示されたホームページのアドレスを取得することはできないでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <title>chosproduce.com</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript" src="./js/thickbox.js"></script> <link rel="stylesheet" href="./css/thickbox.css" type="text/css" media="screen"> <script type="text/javascript"><!-- function addcheck() { url = document.getElementById("add").value; document.getElementById("hide").href = url + "?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=0&width=0"; document.getElementById("push").click(); document.getElementById("er").innerHTML = ""; checkurl = (Thickboxに表示されたアドレス); if(checkurl != url) { document.getElementById("er").innerHTML = "実在しません"; } tb_remove(); } //--></script> <style type="text/css"><!-- #hide { display:none; } --></style> </head> <body> <div> <input type="text" name="add" id="add"> <input type="button" value="check" onclick="addcheck()"> <a href="" title="addcheck" class="thickbox" id="hide"> <input type="button" value="c" id="push"> </a> <div id="er"></div> </div> </body> </html> という感じにしています window.openだと(window名).location.hrefで多分取れると思うのですが開いて閉じると画面がパチッとなってしまうのでできません thickboxだとwindow名（iframe仕様になってるのでiframe名かな？）が何かお分かりになる方いらっしゃいますでしょうか？

  • XHTMLとJavascript・CSSで表示位置の固定方法について

    HTMLからXHTMLへソースをそのままで移行したら位置の固定がされなくなりました。 <div id="msg">message</div>の部分をスクロールしても常に同じ場所に表示したいです。 XHTMLの知識が殆どなく、原因が判りません。 Javascriptを別ファイルにしても動きませんでした。 修正方法、もしくは代替案をお願いします。 宜しくお願いいたします <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <script type="text/javascript"> var offX = 0; var offY = 0; function setMenu(){ if(document.all){ var mx = parseInt(document.body.scrollLeft+offX); var my = parseInt(document.body.scrollTop+offY); } else { var mx = parseInt(self.pageXOffset+offX); var my = parseInt(self.pageYOffset+offY); } if(document.getElementById){ document.getElementById('msg').style.left=mx; document.getElementById('msg').style.top=my; }else if(document.all){ document.all('msg').style.pixelLeft=mx; document.all('msg').style.pixelTop=my; }else if(document.layers){ document.layers['msg'].moveTo(mx,my); } } onscroll = setMenu; onresize=setMenu; //--> </script></head> <body bgcolor="#111144"> <div id="msg"> message </div> </body> </html>

  • jquery、javascriptについて

    あるdivエリア内をクリックすると、特定のチェックボックスに チェックが入るということをしています。 （チェックボックスにチェックを入れるとdiv内の色が変わります。） つまり、divとチェックを連動させたいのです。 その部分は下記でできたんですが、 <?xml version="1.0" encoding="UTF-8"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("div#first").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.first").attr("checked","checked"); $("div#first").css("background-color","#FF0000"); }); $("input.first").click(function(){ $("div#first").css("background-color","#CCCCCC"); }); }); $(function(){ $("div#second").mouseover(function() { $(this).css("cursor","pointer"); }).click(function(){ $("input.second").attr("checked","checked"); $("div#second").css("background-color","#FF0000"); }); $("input.second").click(function(){ $("div#second").css("background-color","#CCCCCC"); }); }); </script> </head> <body> <div id="first" style="width:20px; height:20px; background-color:#CCCCCC" >1</div> <div id="second" style="width:20px; height:20px; background-color:#CCCCCC">2</div> <input class="first" name="test" type="checkbox" value="" /> <input class="second" name="test" type="checkbox" value="" /> </html> 全部で、その組み合わせを10箇所作りたいのですが、 function?を単純に10個複製すればできますが、 もっと簡単にまとめる方法はないのでしょうか？ さらに贅沢をいうと、 <div>と<input>は上記では、first,secondのように、id,class名で あわせてますが、ポジションなどで連動できるともっといいです。 1番目のdivをクリックしたら、inputの一番目にチェックのようなことです。 そんなことができるのでしょうか？ 具体的に教えていただけると幸いです。 よろしくお願いいたします。

  • firefox+xhtml+javascript

    お世話になっております。 divをweb上でドラッグできるスクリプトを組みました。 Opera9.6,IE6では動いているのですが、Firefoxでは、ある条件下でしか動きません。 ある条件とは、DOCTYPEの宣言がされていないことで、XHTMLにしようとDOCTYPEを宣言すると、動作しなくなってしまいます。 <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ja'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <meta http-equiv='Content-Script-Type' content='text/javascript' /> <title>test</title> <script type='text/javascript' src='FILENAME.js'></script> -------- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> を消せば動きます。 仮に、DOCTYPEをHTML4.1などにしても動きません。 クオートをシングルからダブルにしても同じです。 動かない状態でも、JS自体は読んで、onload関数の中は見に行っているようです（alertを埋め込んだらでたので） 可能性として、 外部ファイルのJSの書き方に問題があるのでしょうか？ それとも、HTML側に問題があるのでしょうか？ ソースを見なくても何か考えられることがあれば、教えてください。 よろしくお願いします。

  • cssがIE6で適用されない理由は

    教則本を見てcss/xhtmlでサイトを作ったのですが、 （教則本がIE7以降対応だった為） safari firefoxd IE7では表示がうまくいくのですが、 IE6では全くcssが適用されないです。 少し調べたところこの辺の記述に問題があるのかなと思っています。 誰か教えて下さい。 ............................................................................... <!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="jap" lang="jap" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> ....................................................................

    • ベストアンサー
    • HTML
  • crossSlideがうまく機能しないです；

    簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、 全く何も表示されない状態で困っています。 下記のようにソースは記載しています。 <!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" /> <meta http-equiv="content-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。 ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。 何が原因なのでしょうか。 よければアドバイスの方よろしくお願いします。

  • inputの中身を書き換える方法について

    下記で書き換え実行ボタンを押下すると、初期値1は変更後1に変わるのですが、初期値２と初期値３が変わりませんでした。 そのため、inputの中を書き換えるには、divの場合とは違う書き方をしないといけないのかと思ったのですが、どのように記述すればよいかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。 <!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-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <!-- $(function(){ $("#change").click(function(){ $("#text1").html("変更後１"); $("#text2").html("変更後２"); $("#text3").html("変更後３"); }); }); // --> </script> <title>title</title> </head> <body> <form> <input id="change" type="button" value="書き換え実行" /> </form> <br /> <div id="text1">初期値１</div> <input type="text" name="text2" id="text2" value="初期値２" /> <input type="hidden" name="text3" id="text3" value="初期値３" /> </body> </html>

    • ベストアンサー
    • AJAX
  • ＪＳの記述を別ファイルに移す

    下記のＨＴＭＬ内の　<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>

  • 下記のタグの中で必要ないのはありますか？

    (1)　<?xml version="1.0" encoding="UTF-8"?> (2)　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3)　<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4)　<head> (5)　<title>●●●●●●●●</title> (6)　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7)　<meta http-equiv="Content-Style-Type" content="text/css" /> (8)　<meta name="robots" content="INDEX,FOLLOW"> (9)　<meta name="description" content="●●●●●●●●"> (10)　<meta name="keywords" content="●●●●●●●●"> (11)　<meta name="content="●●●●●●●●" /> (12)　<meta http-equiv="Content-Script-Type" content="text/javascript"> (13)　<meta http-equiv="Content-Style-Type" content="text/css"> (14)　<link href="css/A1.css" rel="stylesheet" type="text/css" /> (15)　<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  • jqueryを使ったスクロール画面が正しく作動しません。

    jqueryを使ったスクロール画面が正しく作動しません。 HTMLに関する質問コーナーにはふさわしくない質問かもしれませんが、jquery.jstocktickerを使ったスクロール画面に関して教えて欲しいことがあります。 以下のようなものを書いてみました。しかし、スクロールされるべき文字（この場合は「テスト」）が右からでてきません。左端に現われてすぐに消えてゆきます（一様左にスクロールされながら消えるのですが）。 どこが間違っているのかをご指摘していただければと思い、投稿させていただきました。 よろしくお願いいたします。 <!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-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>スクロール</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.jstockticker-1.1.js"></script> <link href="jQuery/innerFade/css/reset.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/fonts.css" rel="stylesheet" type="text/css" /> <link href="jQuery/innerFade/css/jq_fade.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(function() {$("#ticker").jStockTicker({interval: 5});}); </script> <style type="text/css"> div#tickercontainer{width: 680px;margin-left:auto;margin-right:auto;position:relative} div#wrap{position:relative;padding:5px; overflow: hidden} div#ticker{position:relative} div#ticker span{padding-right:20px} </style> </head> <body> <div id="tickercontainer"> <div id="wrap"> <div id="ticker"> <span>&nbsp;&nbsp;&nbsp;&nbsp; テスト</span> </div> </div> </div> </body> </html>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する