- ベストアンサー
【javascript】document.getElementByIdは一つしか使えないの？
以下をhtmlをブラウザで見ると、文字列"aaa"は表示されますが、"bbb"は表示されません。 <html> <head> <SCRIPT LANGUAGE='JavaScript1.2'><!-- function init(){ document.getElementById("a").innerHTML="aaa"; document.getElementById("b").innerHTML="bbb"; } //--></script> </head> <body onload="init()"> <div id="a"></dev> <div id="b"></dev> </body> </html> ブラウザはＩＥ，ＦＦと試しましたが共に同じ結果でした。 ＦＦのエラーコンソールには document.getElementById("b").innerHTML="bbb" is null のエラーメッセージが出てましたが、文法的に何が問題なのでしょうか？
- 小林 K太郎（@kingfruits）
- お礼率66% (211/319)
- JavaScript
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
とりあえず、 <div id="a"></dev> <div id="b"></dev> ↓ <div id="a"></div> <div id="b"></div> に変更…。
その他の回答 (1)
関連するQ&A
- JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- 【javascript 文法】値渡し？参照渡し？
以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"><!-- var gDown= false; var div = document.createElement('div'); div.id = 'AAA'; div.innerHTML = 'AAA'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); var div = document.createElement('div'); div.id = 'BBB'; div.innerHTML = 'BBB'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); Event.observe(document, 'mouseup',function(){ alert(gDown.id); gDown=false; }); //--></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって 参照渡し？それとも値渡し？ と混乱しています。 この辺のところを、教えてください。お願いいたします。
- ベストアンサー
- JavaScript
- document.getElementById
document.getElementByIdでURLを変数に代入したいのですが うまくリンクになりません。 どこが間違っているのでしょうか？ どうしたらよいのでしょうか？ ソースはこちらです <!DOCTYPE html> <html lang="ja"> <head> <script language="JavaScript" type="text/javascript"> var url = 'http://www.goo.ne.jp/'; var urlgoo = document.getElementById("urlgoo").src = url; </script> </head> <body> <a id="urlgoo" title="sample">Link</a> </body> </html>
- ベストアンサー
- JavaScript
- document.getElementByIdがIE8だけ動きません
javascript 初心者です。 HP上で問い合わせページを作っています。 質問の内容によって入力項目を表示/非表示させるために以下のようなスクリプトを書きました。 q-1 を選んだ時は”名前”と”質問内容”を入力，q-2 を選んだ時は”名前”，”入力１”，”質問内容”を入力するという形式です。 質問内容の選択はプルダウンメニューから行います。 IE8以外では動くのですが、IE8だけ動きません。 どうすればよいかを教えて下さい。 <head> 略 <script type="text/javascript"><!-- function checkmenu( disp ) { var a = disp ; document.getElementById('basic-info').style.display = "block"; document.getElementById('question').style.display = "block"; switch(a){ case "select_q-1" : document.getElementById('disp_q-2').style.display = "none"; break; case "select_q-2" : document.getElementById('disp_q-2').style.display = "block"; break; } } --> </script> </head> <body> <略> <select name="naiyou"> <option onclick="checkmenu('select_q-1')" value ="q-1">質問１<br> <option onclick="checkradio('select_q-2')" value ="q-2">質問２<br> <div id="basic-info" style="display:none"> <table class="aaa"> <tr> <td class="aaa" width="30%" valign="top"><b>お名前:</b></td> <td class="bbb" width="70%"><input type="text" name="name" size=30 maxlength=50 value=""></td> </tr> </table> </div> <div id="disp_q-2" style="display:none"> <table class="aaa" > <tr> <td class="bbb" width="30%" valign="top"><b>入力１：</b></td> <td class="td_toumei" width="70%"><input type="text" name="nyuuryoku1" size=30 maxlength=50 value=""></td> </tr> </table> </div> <div id="question" style="display:none"> <table class="aaa"> <tr> <td class="aaa" colspan="2"><b>質問内容: </b></td> </tr> <tr> <td class="bbb" valign="top" colspan="2"> <textarea name="question" cols="60"rows="10"></textarea> </td> </tr> <tr> <td class="bbb" colspan="2"> <input type="hidden" name="language" value="j"> <input type="submit" value="送信"> <input type="button" name="del" value="本文 クリア" onclick="msgclear()"> </td> </tr> </table> </div> 略 </body> 実際の質問の項目や入力内容はもう少し複雑ですが、おおまかにはこんな感じです。 プルダウンメニューで選択しても、IE8だけまったく動きません。 よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- 【javascript】JSON形式のデータをダンプしたい。
JSON形式のデータをダンプしたいです。 toSource()を使って以下の様に書いてみました。 <html> <head> <SCRIPT LANGUAGE='JavaScript1.2'><!-- function init(){ element=document.getElementById("data").innerHTML; list=eval("("+element+")"); document.getElementById("out").innerHTML=list.toSource(); } //--></script> </head> <body onload="init()"> <div id="data"> [ {name:"山田", age:30}, {name:"鈴木", age:40}, {name:"佐藤", age:50} ] </div> <div id="out"></div> </body> </html> IEとOperaではエラーになってしまいました。 FFではエラーなく動作しました。結果を以下に記します。 [ {name:"山田", age:30}, {name:"鈴木", age:40}, {name:"佐藤", age:50} ] [{name:"\u5C71\u7530", age:30}, {name:"\u9234\u6728", age:40}, {name:"\u4F50\u85E4", age:50}] ※全角文字がそのまま表示されない。 なにか良い方法は無いでしょうか？
- ベストアンサー
- JavaScript
- Javascriptで文字の書き換え
現在、IE8とChromeを使用しています。 どちらのブラウザで試してもdocument.write("文");は読み込みますが <id>で指定したタグの中身が変わりません。 javascriptに書いたinnerHTML及びinnerTextの使い方か、もしくは、 根本的なところを何処か間違っているでしょうか？ -----------HTML文------------------------------------------------------ <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>2011_09_02_1</title> <link rel="stylesheet" href="2011_09_02_1.css"> <script type="text/javascript" src="2011_09_02_1.js"></script> <body> <div id="str"><h3>Good morning</h3></div> </body> </html> ---------------外部CSS文----------------------------------------------- div h3{ color:#0000ff; } ---------------外部javascript文------------------------------------------ //タグを含む書き換え用ソース document.write("読み込むかテスト"); var chenge; chenge = document.getElementById(str); chenge.innerHTML = "Good Night"; ---------------------------------------------------------- //下は後から試した文--------文字のみ書き換え用ソース document.write("読み込むかテスト"); //document.getElementById("str").innerText = "Good Night"; --------------------------------------------------------------------------
- ベストアンサー
- JavaScript
- PSPのWebブラウザで、動的にタグ入の文字を挿入するにはどうしたら良
PSPのWebブラウザで、動的にタグ入の文字を挿入するにはどうしたら良いですか？ <div id="aaa">ここを変える</div> function change(){ document.getElementById('aaa').innerHTML="<b>foo</b>"; } としても、<div>の中身が太文字のfooとならずに、<b>foo</b>となってしまいます。 <div id="aaa">ここを変える</div> function change(){ var aaa=document.getElementById("aaa"); aaa.firstChild.nodeValue='<b>foo</b>'; document.body.appendChild(aaa); } としても結果は同じでした。 これを太字で表示させる方法はありますか？
- ベストアンサー
- JavaScript
- IEだけで動きません。Javascriptに関する質問です。
IEだけで動きません。Javascriptに関する質問です。 初心者です。よろしくお願いします。 下記のページを作りました。 menuをクリックすると、ページが現れるようにしています。aaa.jsで制御しています。 ページの高さがそれぞれ違うので、bbb.jsで高さを取得しています。 IEでは、bbb.jsのwindow.parent.document.getElementById('obj')で「オブジェクトがありません」とエラーが出て、動きません。 他のブラウザでは動きました。 どうしてでしょう？ 悩んでいます。 どなたか教えてください。よろしくお願いいたします。 <html> <head> <link rel="stylesheet" type="text/css" href="main.css" media="screen,print" /> <script type="text/javascript" src="aaa.js"></script> </head> <body> <div id="container"> </div> <div id="menu"> <ul> <li><a href="javascript:changeObj('a.htm')" title="a">a</a></li> <li><a href="javascript:changeObj('b.htm')" title="b">b</a></li> <li><a href="javascript:changeObj('c.htm')" title="c">c</a></li> </ul> </div> </body> </html> ***aaa.js*** /* オブジェクトの変更 */ function changeObj(html){ var contents = '<object id="obj" data="' + html + '" type="text/html"><\/object>'; window.document.getElementById('container').innerHTML = contents; } ***main.css*** /* obj */ #obj{ visibility:hidden; position:absolute; right:5%; min-width:560px; background-color:#CCFFFF; z-index:1; border-style:none; overflow:visible; } ***a.htm*** <html> <head> <script type="text/javascript" src="bbb.js"></script> </head> <body> <div id="page-height"> <div id="a"><!--ここにページ内容--> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- [javascript][DOM]getElementByIdやremoveChildの戻り値と処理の結果
以前から気になっていたけれど聞かなかったこと。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>QFUMEI テストケース1</title> <script type="application/ecmascript"> function init(){ var hoge = document.getElementById("hoge"); var fuga = document.getElementById("fuga"); hoge.removeChild(fuga); alert(fuga); // [object HTMLParagraphElement] ← nullではない fuga = document.getElementById("fuga"); alert(fuga); // null } </script> </head> <body onload="init();"> <div id="hoge"> <p id="fuga">ほげ</p> </div> </body> </html> 結局 fuga = getElementById("fuga")によって 何が代入されているのでしょう？ document上のp#fugaへの参照であれば removeChildの直後 fuga = nullとなっていてもよさそうだなと思っているのですが・・・・。 hoge.firstChild.nodeValueをいじるとp要素内の文字列が変化するし・・・・
- ベストアンサー
- JavaScript
お礼
恥ずかしい限りです。。。 ご回答ありがとうございました。