2011-07-31 9 views
0

DOM内の特定の要素に特定のdivに文字列変数の値を書き込む際に問題が発生しています。 document.getElementById( "xxxxx")。innerHTMLはまったく動作していませんか?

のゲーム言わせ

=

document.getElementById("game").innerHTML=game; 

TENが書き込みされていません。私は、スクリプトを持っているし、そのスクリプトの最後に私が文書化することができます下に

<div id="game"></div> 

問題はコードです。書き込み(ゲーム)、それは正常に動作しますが、私は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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<!--<form id="teamSelect"onsubmit="return function games();"><select> 
    <option value="TEN">Tennessee</option> 
    <option value="GB">Green Bay</option> 
    </select> 
    <input type="submit" name="Submit" /> 
    </form> 
--> 

<script> 
var jsonString = '{"ss":[["Thu","7:30","Pregame",,"JAC",,"NE",,,,"55425",,"PRE1","2011"],' + 
    '["Thu","7:30","Pregame",,"BAL",,"PHI",,,,"55424",,"PRE1","2011"],' + 
    '["Thu","8:00","Pregame",,"SEA",,"SD",,,,"55423",,"PRE1","2011"],' + 
    '["Thu","8:30","Pregame",,"DEN",,"DAL",,,,"55426",,"PRE1","2011"],' + 
    '["Thu","10:00","Pregame",,"ARI",,"OAK",,,,"55427",,"PRE1","2011"],' + 
    '["Fri","7:30","Pregame",,"MIA",,"ATL",,,,"55430",,"PRE1","2011"],' + 
    '["Fri","7:30","Pregame",,"CIN",,"DET",,,,"55429",,"PRE1","2011"],' + 
    '["Fri","7:30","Pregame",,"PIT",,"WAS",,,,"55431",,"PRE1","2011"],' + 
    '["Fri","8:00","Pregame",,"TB",,"KC",,,,"55428",,"PRE1","2011"],' + 
    '["Fri","8:00","Pregame",,"SF",,"NO",,,,"55432",,"PRE1","2011"],' + 
    '["Sat","7:30","Pregame",,"GB",,"CLE",,,,"55433",,"PRE1","2011"],' + 
    '["Sat","8:00","Pregame",,"NYG",,"CAR",,,,"55437",,"PRE1","2011"],' + 
    '["Sat","8:00","Pregame",,"BUF",,"CHI",,,,"55434",,"PRE1","2011"],' + 
    '["Sat","8:00","Pregame",,"IND",,"STL",,,,"55435",,"PRE1","2011"],' + 
    '["Sat","8:00","Pregame",,"MIN",,"TEN",,,,"55436",,"PRE1","2011"],' + 
    '["Mon","8:00","Pregame",,"NYJ",,"HOU",,,,"55438",,"PRE1","2011"]]}'; 

//var jsonString = '{"test": "test1"}';  

for (i=0; i<15;i++) { 
    if ("TEN" == eval('(' + jsonString + ')').ss[i][6] || "TEN" == eval('(' + jsonString + ')').ss[i][4]) { 
    var game=(eval('('+jsonString+')').ss[i][6] + ' vs ' + eval('('+jsonString+')').ss[i][4]); 
    var day=(eval('('+jsonString+')').ss[i][0] + ' at ' + eval('('+jsonString+')').ss[i][1]); 
    } 
} 
document.write(game); 
document.getElementById("game").innerHTML=game; 
</script> 

<div id="game" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:16px">hello</divЮ 
</body> 
</html> 

答えて

3

スクリプトを実行しているときに、要素を探しているときに、その要素が後で提供されるため、まだ存在しません。

正確に言えば、解析されておらず、まだDOMに追加されていません。

スクリプトをHTMLファイルの最下部(少なくとも要素の下)に移動します。

ライブラリを使用している場合は、簡単に解決できます。例えば、jQueryの場合、すべてを$(function() { ... }ブロック内に配置します。そうすれば、DOMが完全にロードされてから実行されるまではありません(その時点で、要素を安全に検索できます)。

-1

またはあなたがそれがまだ作成されていない#game要素にアクセスしようとしている瞬間にjqueries

$(document).ready(function(){}); 
3

を使用することができます。 あなたはのonloadイベントを待機し、このイベントに関数をバインドする必要があります。

<script type="text/javascript"> 
function init() { 
    /**your code here**/ 
} 
</script> 

<body onload="init()"> 
<div id="game"></div> 
</body></html> 
0

DOMが完全にロードされていないので、初期化()関数は、動作しません。あなた自身jqueryまたはdojoを取得し、ドキュメントの準備ができた関数を使用するか、javascriptブロックをhtmlドキュメントの終わり、つまり閉じたbodyタグの前に置きます。

自分自身のFirebugを取得し、最初にこのようなコードを書き換える:

<html> 
<body> 
<div id="myid"></div> 
</body> 
<script language="Javascript"> 
document.getElementByID('myid').innerHTML = .... 
</html> 

テイマー

関連する問題