document.getElementById does not work on Firefox

Question

Firefox returns null when I try to call document.getElementById on an element.

Here is the call

document.getElementById('interaction4793')

However the element is present in the DOM. I can find it

<interaction id="interaction4793">
    <action id="action3268" trigger="enter" type="hover" />
    <reaction delay="0" id="reaction3709" options="reloadOnly" target="page0001" transition="none" type="showPage" />
</interaction>

Even when I select it from the inspector and use the $0 trick it returns null:

document.getElementById($0.id)

When I try to get the elements from getElementsById it works.

EDIT: Chrome and Safari do not return null. I tested Firefox (version 26) on Window and MacOS both return null.

EDIT2: I think Firefox do not understand that the attribute id is the id. When I search by attribute with jquery I can find the interaction:

console.log($('#interaction102').length); // returns 0
console.log($('[id="interaction102"]').length); // returns 1

Answer 1

The question is already answered here: JavaScript getElementByID() not working

Sometimes happen when the content of your website is not already loaded and crash.

Hope to be helpful

EDIT1: You can also try this: var yourvar= $("#interaction4793")[0]; It works for me