Duda con la interacción entre Javascript y CSS

replica · #1 (**permalink**) 27/01/2014, 06:06

Tengo un html vacío, que sólo llama a un CSS y a un Javascript:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1;" />
 
<title>Calendario</title>
 
<link rel="stylesheet" href="estilo.css" type="text/css" />
 
<script src="comportamiento.js" type="text/javascript">
</script>
 
</head>
 
<body>
</body>
</html>

Un CSS con lo mínimo, con un background-color en gris para un div, como elemento más llamativo:

Código CSS:

Ver original@charset "utf-8";
 
body{
    font-family: Arial;
    font-size: 15px;
}
 
h1{
    text-align: center;
    display: inline;
    margin: 0 40px;
}
 
#main{
    width: 90%;
    margin: 0 auto;
    text-align: center;
    background-color:#F2F2F2;
}

Y un javascript que crea todo el contenido del html:

Código Javascript:

Ver originalvar hoy = new Date();
    var any = hoy.getFullYear();
 
function vistaanual(any)
{
    if(document.getElementById("main"))
        document.body.removeChild(document.getElementById("main"));
 
    document.write("<div id=\"main\">");
    document.write("<button id=\"btn_any_ant\" value=" + parseInt(any - 1) + ">" + parseInt(any - 1) + "</button>");
    document.write("<h1>" + any + "</h1>");
    document.write("<button id=\"btn_any_sgt\" value=" + parseInt(any + 1) + ">" + parseInt(any + 1) + "</button>");
        document.write("</div>"); // Cierro el div del main
        document.getElementById('btn_any_ant').addEventListener('click', function(){vistaanual(any - 1/*parseInt(document.getElementById('btn_any_ant').value)*/)}, false);
        document.getElementById('btn_any_sgt').addEventListener('click', function(){vistaanual(any + 1/*parseInt(document.getElementById('btn_any_sgt').value)*/)}, false);
}
 
/*window.onLoad = function(){*/
        window.addEventListener('load', vistaanual(any), false);
/*}*/

Mi intención es crear un calendario. Con otras funciones y estilos css, que no pongo aquí por no alargar el post, y que no afecta a la cuestión que me aborda, soy capaz de mostrar todos los días del año corriente, agrupados por meses y en forma de cuadrícula.

El problema que tengo es que sólo puedo aplicar los estilos CSS la primera vez que se carga el archivo "Calendario.html". En el momento que presiono alguno de los botones de año siguiente o año anterior, el resultado html se aplica correctamente, pero el calendario en sí no se muestra con sus cuadrículas (para hacerlo sencillo, en este ejemplo el background-color gris).

El div "main" lo destruyo porque, si no lo hago, sólo puedo presionar el botón de cambio de año 1 sola vez, donde sí aparece el texto, pero tampoco se aplica el CSS.

En definitiva, hay algo en la interacción entre CSS y Javascript que se me escapa. Pensaba que CSS se aplicaba automáticamente al cargar la página, pero no es así.

¿Alguien puede echarme una mano?
¿Cuál es el orden de carga de los elementos html, js y css?

He probado con "defer" la línea de carga de js, y con el window.onload que veis en el js, pero cualquiera de las dos formas no me escribe nada en pantalla, imagino que es porque la carga de la página ya ha concluido definitivamente.

Gracias.

bathorz · #2 (**permalink**) 27/01/2014, 14:46

Este es tu script con algunos cambios. Tal vez te ayude a encontrar la solución:

Código HTML:

Ver original<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Calendario</title>
    <style type="text/css">
      @charset "utf-8";
      body{
        font-family: Arial;
        font-size: 15px;
      }
      h1{
        text-align: center;
        display: inline;
        margin: 0 40px;
      }
      #main{ border: solid 1px;
             width: 90%;
             margin: 0 auto;
             text-align: center;
             background-color:#F2F2F2;
      }
    </style>
    <script type="text/javascript">
      var hoy = new Date();
      var any = hoy.getFullYear();
 
      function vistaanual(any) {
        if (document.getElementById("main"))
          document.body.removeChild(document.getElementById("main"));
 
        document.write("<div id=\"main\">");
        document.write("<input type=\"button\" id=\"btn_any_ant\" value=" + parseInt(any - 1) + "></button>");
        document.write("<h1 id=\"anio\">" + any + "</h1>");
        document.write("<input type=\"button\" id=\"btn_any_sgt\" value=" + parseInt(any + 1) + "></button>");
        document.write("</div>"); // Cierro el div del main
        //
        document.getElementById('btn_any_ant').addEventListener('click', function() {
          document.getElementById('anio').innerHTML = parseInt(any - 1);
          var ant = any - 1;
          document.getElementById('btn_any_ant').value = parseInt(ant - 1);
          // el otro
          document.getElementById('btn_any_sgt').value = parseInt(any);
          any -= 1;
        }, false);
        document.getElementById('btn_any_sgt').addEventListener('click', function() {
          document.getElementById('anio').innerHTML = parseInt(any + 1);
          var sig = any + 1;
          document.getElementById('btn_any_sgt').value = parseInt(sig + 1);
          // el otro
          document.getElementById('btn_any_ant').value = parseInt(any);
          any += 1;
        }, false);
      }
      window.addEventListener('load', vistaanual(any), false);
    </script>
  </head>
  <body>
  </body>
</html>

replica · #3 (**permalink**) 28/01/2014, 04:14

Funciona, pero necesito llamar a la misma función que crea los botones, y esto no me lo soluciona.

Sigo perdido, y no sé por dónde meter mano.

bathorz · #4 (**permalink**) 28/01/2014, 11:12

Con llamada a función:

Código Javascript:

Ver original<script type="text/javascript">
 
      var hoy = new Date();
      var any = hoy.getFullYear();
 
      function vistaanual(any) {
        if (document.getElementById("main")) {
          document.body.removeChild(document.getElementById("main"));
        }
 
        var html = '';
        html += "<div id=\"main\">";
        html += "<input type=\"button\" id=\"btn_any_ant\" value=" + parseInt(any - 1) + "></button>";
        html += "<h1 id=\"anio\">" + any + "</h1>";
        html += "<input type=\"button\" id=\"btn_any_sgt\" value=" + parseInt(any + 1) + "></button>";
        html += "</div>";
 
        document.body.innerHTML = html;
 
        document.getElementById('btn_any_ant').addEventListener('click', function() {
          vistaanual(any - 1);
        }, false);
 
        document.getElementById('btn_any_sgt').addEventListener('click', function() {
          vistaanual(any + 1);
        }, false);
 
      }
 
      window.addEventListener("load", function() {
        vistaanual(any);
      }, false);
    </script>