prototype and dom not delivering expected result

Question

I'm trying to update (replace content) of a table cell based on returned JSON.

if I render my results in my loop using console.log - I get the correct/expected result. however when I add the DOM reference - nothing happens (to the page)

if i type the js to change the DOM in the console - it works... so I'm sure the syntax is correct...

this is part of an ajax call, the meat of which is irrelavent to the question - since the return (response.responseJSON) is correct..

onSuccess: function( response ) {
var p = response.responseJSON;
for ( var key in p ) {
    if ( p.hasOwnProperty( key ) ) {
    console.log( key + " = " + p[key] ); // this works, loops correct number and shows key/value as expected
    document.getElementById[key].update('hey'); // if i add this the loop doesn't go past the first key/value - and the page element that matches the key does not change
    }
}
}

if i type " document.getElementById['myKey'].update('hey'); " in the console, the heml element id of 'myKey' DOES change to 'hey'...

I'm so confused.

Answer 1

document.getElementById(key)

Parens instead of square brackets

var e = document.createElement("DIV");
e.id = "test123123";
document.body.appendChild(e);
console.log(document.getElementById["test123123"]); // undefined
console.log(document.getElementById("test123123")); // actual DOM element