document.getElementById（“ xxxxx”）。innerHTML根本不起作用？

Question

我在嘗試將字符串變量的值寫入DOM中特定元素的特定元素時遇到問題。

假設游戲=十

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

不會寫入：

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

問題出在下面的代碼中，我有一個腳本，在該腳本的結尾，我可以document.write（game）並可以正常工作，但是我無法將其寫入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>

Answer 1

在您執行腳本並查找元素時，該元素尚不存在，因為稍后會出現。

確切地說，它尚未解析並添加到DOM中。

因此，將腳本移動到HTML文件的底部（至少在元素下方）。

如果您使用某種庫，也可以很容易地解決它：例如，對於jQuery，將所有內容都放在$(function() { ... }塊中，這樣，直到DOM完全加載后，它被執行（此時您可以安全地搜索該元素）。

Answer 2

當您嘗試訪問#game元素時，尚未創建該元素。 您應該等待onload事件並將函數綁定到此事件：

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

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

Answer 3

Init（）函數將不起作用，因為DOM尚未完全加載。 您可以自己使用jquery或dojo並使用文檔就緒功能，也可以將javascript塊放在html文檔的末尾，也就是封閉body標記之前。

讓自己成為Firebug，並從頭開始重寫如下代碼：

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

塔梅爾

Answer 4

或者您可以使用jqueries

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

document.getElementById（“ xxxxx”）。innerHTML根本不起作用？

問題描述

4 個解決方案

解決方案1
3 已采納 2011-07-31 19:04:22

解決方案2
3 2011-07-31 19:06:44

解決方案3
0 2011-07-31 19:23:47

解決方案4
-1 2011-07-31 19:05:49

document.getElementById（“ xxxxx”）。innerHTML根本不起作用？

問題描述

4 個解決方案

解決方案1 3 已采納 2011-07-31 19:04:22

解決方案2 3 2011-07-31 19:06:44

解決方案3 0 2011-07-31 19:23:47

解決方案4 -1 2011-07-31 19:05:49

解決方案1
3 已采納 2011-07-31 19:04:22

解決方案2
3 2011-07-31 19:06:44

解決方案3
0 2011-07-31 19:23:47

解決方案4
-1 2011-07-31 19:05:49