javascript focus() nefunguje ve Firefoxu a IE?

Snažím se zobrazit formulář a zaměřit ho, z nějakého důvodu to funguje pouze v prohlížeči Chrome. Jak mohu zajistit, aby to fungovalo napříč prohlížeči?

<script>
function SearchCity(evt){
    document.getElementById('ciudad-eq').style.display='none';
    document.getElementById('buscarciudad').style.display='inline';
    document.getElementById("city").focus();
}
</script>    


    <div onclick="SearchCity(event)" id="ciudad-eq" style="cursor: pointer;">
    Not from Miami?
    </div>

    <div id="buscarciudad" style="display: none;">
        <form role="search" method="post" id="searchform" action="insert/insert-ip.php">
            <input type="text" id="city" name="ciudad" value="¿Cual es tu ciudad?" style="width: 140px;" >
            <input type="submit" value="ir" style="padding: 2px 6px;">
        </form>
    </div>

Zde můžete vidět, že nefunguje:

http://jsfiddle.net/CCxrp/1/

Co mohu udělat, aby to fungovalo? Díky

Odpověď

Stačí si prohodit pořadí věcí:

    <div onclick="SearchCity(event)" id="ciudad-eq" style="cursor: pointer;">
    Not from Miami?
    </div>

    <div id="buscarciudad" style="display: none;">
        <form role="search" method="post" id="searchform" action="insert/insert-ip.php">
            <input type="text" id="city" name="ciudad" value="¿Cual es tu ciudad?" style="width: 140px;" >
            <input type="submit" value="ir" style="padding: 2px 6px;">
        </form>
    </div>

<script>
function SearchCity(evt){
    document.getElementById('ciudad-eq').style.display='none';
    document.getElementById('buscarciudad').style.display='inline';
    document.getElementById("city").focus();
}
</script>    

Divs musí být v DOM, než je JavaScript může vyhledat. Toto je hlavní výhoda $(document).ready(function(){ ...}); JQuery