I am having a problem trying to write a String Variable's value to a specific element in the DOM to the specific div.
let's say game=TEN
document.getElementById("game").innerHTML=game;
doesn't write to:
<div id="game"></div>
Problem is with the code below I have a script and at the end of that script I can document.write(game) and it works fine, but I can't write it to the div? Maybe I am trying to do this wrong.
<!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>
At the time you execute the script and you're looking for the element, it does not exist yet because it comes later on.
To be precise, it has not been parsed and added to the DOM yet.
So move your scripts to the bottom of the HTML file (at least below the element).
If you are using some kind of library, it can be solved easily too: for jQuery for example, place everything inside a $(function() { ... } block. That way, it isn't until the DOM has fully loaded that it gets executed (at which time you can safely search for the element).
On the moment when you are trying to access the #game element it is not yet created. You should wait for the onload event and bind the function to this event:
<script type="text/javascript">
function init() {
/**your code here**/
}
</script>
<body onload="init()">
<div id="game"></div>
</body></html>
The Init() function will not work, because the DOM is not entirely loaded. Either you get yourself jquery or dojo and use the document ready functions, or place the javascript block at the end of your html document, aka before the closing body tag.
Get yourself Firebug, and rewrite the code like this for the beginning:
<html>
<body>
<div id="myid"></div>
</body>
<script language="Javascript">
document.getElementByID('myid').innerHTML = ....
</html>
Tamer
or you can use jqueries
$(document).ready(function(){});
来源：https://stackoverflow.com/questions/6891604/document-getelementbyidxxxxx-innerhtml-isnt-working-at-all