Javascript's getElementById and innerHTML Don't Work Indirectly

Question

Here is my code:

<html>
<head>
<title>My Game Title Goes Here!</title>
<script type="text/javascript">
function startGame(){
    document.getElementById("2").innerHTML = ('Testing!');
}
document.body.onload = keyListener(){
    document.getElementById("1").onkeypress = startGame;
}
</script>
</head>
<body>
<div class="title" name="Game Title" id="0">Game Title</div>
<div tabindex="0" class="gamecontainer" name="Game Container" id="1">
Press any key to start.
</div>
<div class="gamemonitor" name="Game Monitor" id="2">
Game Monitor:
</div>
</body>
</html>

I doesn't work like I expect it to (I'm using Google Chrome).

It only works if I run it directly, like this:

<div tabindex="0" class="gamecontainer" name="Game Container" id="1" onkeypress="document.getElementById('2').innerHTML = ('Testing!')">
Press any key to start.
</div>
<div class="gamemonitor" name="Game Monitor" id="2">
Game Monitor:
</div>

I checked over my code tons of times and i cannot find any clear mistakes like typos or anything. If that is the problem then I am sorry to have wasted your time but this is realy buggin' me.

It think the second way shouldn't work instead of the first, you're mixing with the quotes there... :( — gdoron, Jun 07 '12 at 15:22

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

Element IDs can't start with a number, it's almost definitely contributing to your issue here. Change the IDs in both the HTML and JS to begin with a letter.

Second of all, the keyListener line should probably be something like this:

window.onload = function(){
    document.getElementById("newId").onkeypress = startGame;
}

edited May 23 '17 at 12:29

Community

1
1

answered Jun 07 '12 at 15:22

Dunhamzzz

14,682
4
50
74

But he's using the same id in the second inline way...? – gdoron Jun 07 '12 at 15:23

gdoron · Answer 2 · 2012-06-07T15:29:57.203

1

Change :

document.body.onload = keyListener(){
    document.getElementById("1").onkeypress = startGame;
}

To:

document.body.onload = function(){
    document.getElementById("1").onkeypress = startGame;
}

And, id shouldn't begin with a number as it's an invalid HTML.
Chrome seems to overcome this mistake, but it shouldn't be used.

And move the code to the the <body> tag or use window.onload
document.body doesn't exist above the <body>.

edited Jun 07 '12 at 15:29

answered Jun 07 '12 at 15:24

gdoron

147,333
58
291
367

i changed the ids to letters and i changed keyListener to function and it still doesnt work. – kukac67 Jun 07 '12 at 15:25
1

`document.body` doesn't exist at the point the script is called.... use `window.onload` – Esailija Jun 07 '12 at 15:27
@gdoron yeah exactly at the same second xD – Esailija Jun 07 '12 at 15:29
1

@Esailija. But I edited my answer before the comment, which means => 5 seconds ahead. `:) LOL` – gdoron Jun 07 '12 at 15:32

score 1 · Accepted Answer · answered Jun 07 '12 at 15:27

1

document.body doesn't have an onload property. It should be window.onload instead.

window.onload = function(){
    document.getElementById("1").onkeypress = startGame;
}

DEMO: http://jsfiddle.net/9khng/

answered Jun 07 '12 at 15:27

gen_Eric

223,194
41
299
337

It does (at least in chrome) but `document.body` doesn't exist when the script is executed since the script is in the head – Esailija Jun 07 '12 at 15:28
@Esailija: True. My explanation may not be right, but this was the issue :-P – gen_Eric Jun 07 '12 at 15:29
@kukac67: You mean mark a question "solved"? Click the checkmark under the up/down vote arrows. – gen_Eric Jun 07 '12 at 15:32

score 0 · Answer 4 · edited Jun 07 '12 at 15:25

0

I think IDs can't start with a number.

edited Jun 07 '12 at 15:25

gen_Eric

223,194
41
299
337

answered Jun 07 '12 at 15:22

Michi

2,480
3
28
38

You're right, but this isn't the issue here, he's using the same id in the second inline way. see my answer. – gdoron Jun 07 '12 at 15:26

score 0 · Answer 5 · answered Jun 07 '12 at 15:25

0

Try fixing your "onkeypress" attribute. Your quotes are messed up.

onkeypress="document.getElementById('2').innerHTML = ('Testing!')"

answered Jun 07 '12 at 15:25

Hacknightly

5,109
1
26
27

Javascript's getElementById and innerHTML Don't Work Indirectly

5 Answers5