Problemas con código JS al actualizar la web

[sidneyendis]

Buenos días compañeros!

Tengo un problema que para las nociones que tengo de Javascript me es imposible de solucionar.

El problema se repite en 2 códigos:

En el 1º;
He copiado un código en JS para crear una cuentras atrás para el lanzamiento de mi web.
el código es el siguiente;

Código PHP:

  <script>
 
//variables que determinan la fecha y hora final de la cuenta atras
toYear=2012;
toMonth=03;
toDay=15;
toHour=10;
toMinute=00;
toSecond=00;
 
function countDown()
{
    new_year=0;
    new_month=0;
    new_day=0;
    new_hour=0;
    new_minute=0;
    new_second=0;
    actual_date=new Date();
 
    if(actual_date.getFullYear()>toYear)
    {
        //si ya nos hemos pasado del año, mostramos los valores a 0
        form.second.value=0;
        form.minute.value=0;
        form.hour.value=0;
        form.day.value=0;
        form.month.value=0;
        form.year.value=0;
    }else{
        new_second=new_second+toSecond-actual_date.getSeconds();
        if(new_second<0)
        {
            new_second=60+new_second;
            new_minute=-1;
        }
        form.second.value=new_second;
 
        new_minute=new_minute+toMinute-actual_date.getMinutes();
        if(new_minute<0)
        {
            new_minute=60+new_minute;
            new_hour=-1;
        }
        form.minute.value=new_minute;
 
        new_hour=new_hour+toHour-actual_date.getHours();
        if(new_hour<0)
        {
            new_hour=24+new_hour;
            new_day=-1;
        }
        form.hour.value=new_hour;
 
        new_day=new_day+toDay-actual_date.getDate();
        if(new_day<0)
        {
            x=actual_date.getMonth();
            if(x==0||x==2||x==4||x==6||x==7||x==9||x==11){new_day=31+new_day;}
            if(x==3||x==5||x==8||x==10){new_day=30+new_day;}
            if(x==1)
            {
                //comprobamos si es un año bisiesto...
                if(actual_date.getYear()/4-Math.floor(actual_date.getYear()/4)==0)
                {
                    actual_date=29+actual_date;
                }else{
                    actual_date=28+actual_date;
                }
            }
        }
        form.day.value=new_day;
 
        new_month=-1;
        new_month=new_month+toMonth-actual_date.getMonth();
        if(new_month<0)
        {
            new_month=11+new_month;
            new_year=-1;
        }
        form.month.value=new_month;
 
        new_year=new_year+toYear-actual_date.getFullYear();
        if(new_year<0)
        {
            form.year.value=0;
        }else{
            form.year.value=new_year;
            //vuelve a ejecutar la funcion dentro de 1000 milisegundos = 1 segundo
            setTimeout("countDown()",1000);
        }
    }
}
</script> 
  

El problema es que cuando entras por primera vez no aparece la cuenta atrás, tienes que volver a entrar para que te aparezca.... y el otro problema es que una vez aparece, si actualizo la web vuelve a desaparecer....

En el 2º;
Este es sobre google maps;

Código PHP:

  <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
            function initialize() {
                var latlng = new google.maps.LatLng(varlat, varlong);
                var settings = {
                    zoom: 15,
                    center: latlng,
                    mapTypeControl: true,
                    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                    navigationControl: true,
                    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
                    mapTypeId: google.maps.MapTypeId.ROADMAP};
                var map = new google.maps.Map(document.getElementById("map_canvas"), settings);
                var contentString = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">Høgenhaug</h1>'+
                    '<div id="bodyContent">'+
                    '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>'+
                    '</div>'+
                    '</div>';
                var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
                
                var companyImage = new google.maps.MarkerImage('../../../images/general/iconos/mapgoogle/logo.png',
                    new google.maps.Size(100,50),
                    new google.maps.Point(0,0),
                    new google.maps.Point(50,50)
                );
 
                var companyShadow = new google.maps.MarkerImage('../../../images/general/iconos/mapgoogle/logo_shadow.png',
                    new google.maps.Size(130,50),
                    new google.maps.Point(0,0),
                    new google.maps.Point(65, 50));
 
                var companyPos = new google.maps.LatLng(varlat, varlong);
 
                var companyMarker = new google.maps.Marker({
                    position: companyPos,
                    map: map,
                    icon: companyImage,
                    shadow: companyShadow,
                    title:"Høgenhaug",
                    zIndex: 1});
                
                google.maps.event.addListener(companyMarker, 'click', function() {
                    infowindow.open(map,companyMarker);
                });
            }
        </script> 
  

Aquí el problema es parecido al anterior, cuando entras por primera vez a la web, el mapa sale perfectamente, pero si das actualizar desaparece.

Me imagino que ambos problemas están relacionados... ¿Alguien me puede guiar?

Un saludo muy grande y gracias de antemano!

[sidneyendis]

Otra anotación respecto navegadores:

En IE me funciona correctamente: aún actualizando vuelve a aparecer. Y en la CONSOLA me pone que no hay errores en Javascript.

En Firefox es el que mayores problemas me da: de inicio no funciona, y evidentemente ni actualizando. Su CONSOLA me dice lo siguiente:

Código HTML:

[13:41:54.725] form is not defined @ http://www.miweb.com/cuenta_atras.js:35

Que en ese archivo y en esa linea se encuentra del código que os he puesto anteriormente lo siguiente:

Código PHP:

  }else{
        new_second=new_second+toSecond-actual_date.getSeconds();
        if(new_second<0)
        {
            new_second=60+new_second;
            new_minute=-1;
        }
        form.second.value=new_second; //SE REFIERE A ESTA LINEA!! esta es la linea 35
 
        new_minute=new_minute+toMinute-actual_date.getMinutes();
        if(new_minute<0)
        { 
   

y en google chrome es lo más irónico: No funciona pero tampoco me indica ningún error en su Consola....

Espero que os haya servido esta información y podais ayudarme con mayor claridad. Un saludo

[sidneyendis]

Rectifico.... en google chrome no me indica error.. pero funciona cuando quiere. Entrando muchas veces en el site en una de cada 10 funciona y si actualizo vuelve a desaparecer...

[zerokilled]

buenas,
la consola en firefox claramente indica cual es el problema: la variable form no está definida. ¿a qué hace referencia form? si esa variable no existe, tienes que declararlo indistintamente de si funciona o no en iexplorer. iexplorer hace cosas que no está supuesto hacer, y desgraciadamente chrome parece que le esta siguiendo el juego. por el nombre solo se entiende que form es la referencia a un elemento <form>, pero tienes que declararlo explicitamente. sobre el problema de GMaps, se me ocurre que probablemente sea porque el primer script esta colapsando.

[sidneyendis]

Hola "zerokilled", muchas gracias por tu respuesta.

form hace referencia al formulario donde están los inputs en los que se deben mostrar los días, horas, minutos y segundos que faltan. Te muestro el código ya que no consigo identificar que estoy haciendo mal:

Código HTML:

<div id="timer" style="vertical-align:top; float:left;">
<form name="form" id="form">
<input type="text" size="5" class="number" name="year" style="visibility:hidden; display:none;" disabled="disabled">
<input type="text" size="5" class="number" name="month" style="visibility:hidden; display:none;" disabled="disabled">
<ul class="count-down-timer">
<li class="days">
<p>Días<br />
<input type="text" size="5" class="number"  name="day"  disabled="disabled"><!-- AQUÍ SE MOSTRARÁN LOS DÍAS QUE FALTÁN --><br></p>
</li>
    
<li class="hours">
<p>Horas<br />
<input type="text" size="5" class="number"  name="hour"  disabled="disabled"><!-- AQUÍ LAS HORAS --></p>
</li>
    
<li class="minutes">
<p>Minutos<br />
<input type="text" size="5" class="number"  name="minute"  disabled="disabled"><!-- AQUÍ LOS MINUTOS --></p>
</li>
    
<li class="seconds">
<p>Segundos<br />
<input type="text" size="5" class="number"  name="second"  disabled="disabled"><!-- Y AQUÍ LOS SEGUNDOS --></p>
</li>
</ul>
</form>
</div><!--TIMER FINALIZA--> 

Espero que me puedas ayudar... miestrastanto seguiré buscando la solución! un saludo

Un saludo muy grande

[zerokilled]

tal como antes indique, la variable form no existe. debes crearla antes de utilizarla. por ejemplo, al inicio de la función countDown creas la variable form y le asignas la referencia al elemento <form>. para obtener la referencia utilizas el método getElementById pasandole como argumento el ID asignado al elemento. y una observación aquí porque sospecho que no entenderás el próximo error. preferiblemente utiliza otro nombre para la variable form. uno que no sea reservado ni que refleje algún ID o NAME en los elementos html.

[sidneyendis]

zerokilled estas en todas , eh! Te veo en todos los temas aportando tu granito de arena, un Crack!

Bueno al lío,
He creado la siguiente variable como has dicho antes de countDown:

Código HTML:

var contador = document.getElementById("cuenta_atras");

y he cambiado en id del <form> por "cuenta_atras".

Ahora me sigue dando errores:

En la consola de IE: SCRIPT5007: No se puede obtener valor de la propiedad 'second': el objeto es nulo o está sin definir

En Firefox: Error: contador is null

Y en Google Chrome: Uncaught TypeError: Cannot read property 'second' of null

He intentado mediante otros post solucionarlo, pero sin éxito!

Espero tu ayuda. Un saludo!

[zerokilled]

dos puntos importantes: ¿en dónde estas declarando la variable? ¿en qué momento invocas la función? no puedes obtener la referencia de un elemento mientras este no exista en el documento, independientemente de la metodología. es decir, el navegador tiene que crear primero el elemento antes de que javascript pueda accesar a él. en otras palabras, en caso de obtener la referencia mientras carga el documento el script debe estar luego del código html que representa el elemento. o si se trata de una función que en el cuerpo obtienes la referencia, dicha función no debe ser invocada hasta que el navegador haya creado el elemento. es por eso que getElementById devuelve null y eventualmente un error al intentar acceder a una propiedad del objeto null.

[sidneyendis]

Genial! Listo. Como has sospechado... estaba invocando la función antes del elemento html. Ya no me tira error en ningún navegador.

Muy buen diagnóstico!!!. Gracias por toda la ayuda prestada. Un saludo muy grande!