javascriptfacebookfbjsfacebook-java-api

FBJS JavaScript getElementById returning null?

FBJS is driving my mental, I am having problems with selecting elements. I have the following on the content of my page:

 <button id="sendmessage" type="submit" style="border: 0; background: transparent">
        <img src="Button.png" alt="Submit" />
        <div id="output">Send Message</div><span id="overlay"></span>
  </button>

And as part of my FBJS I have

var refSendMessage = document.getElementById('sendmessage');
var refOutput = document.getElementById('output');

However

refSendMessage.setDisabled(true);

Gets the error Uncaught TypeError: Cannot call method 'setDisabled' of null

But

refOutput.setTextValue("Sending...");

Works fine!

Why is the type of refSendMessage null but refOutput is fine? The ID's are declared in the same place?

Need a JS wizard please :-)

Many thanks for your time,

Extra information, if I use <span id="sendmessage"></span>, no error occurs. Could this be a Facebook Bug?

Solution
    1. Make sure you don't have anything else with id 'sendmessage' on the page.
    2. Try to change <button> to an <input type="button"> with id 'sendmessage' and see if document.getElementById('sendmessage') still returns null. If not, perhaps Facebook has trouble with the <button> element?
    3. Try looking at the rendered markup and make sure the Facebook-generated id specified inside document.getElementById() matches the Facebook-generated id of your button element. If they don't match, then of course a null will be returned.