Pass different javascript html variables when clicking

0

I'm with a calendar with html and javascript, and I would like to click on one day to open another html that I have indicating the year, month and day that I have previously selected.

Before they tell me anything, I looked at the forum for different solutions but I can not get any of them working, I've looked at LocalStorage, SessionStorage, Ajax ... etc ... and I do not know if I'm putting them wrong or what.

I have the monthly calendar already finished and every day there is a hyperlink, which redirects me to the other html. Well, the idea that I have is that I capture the year, month and day that I had clicked on the previous calendar and show it on the daily calendar. I leave my monthly code:

var actual = new Date();

function mostrarCalendario(year, month) {
  var now = new Date(year, month - 1, 1);
  var last = new Date(year, month, 0);
  var primerDiaSemana = (now.getDay() == 0) ? 7 : now.getDay();
  var ultimoDiaMes = last.getDate();
  var dia = 0;
  var resultado = "<tr>";

  var diaActual = 0;
  console.log(ultimoDiaMes);
  var a = 0;
  var b = ++a;
  var last_cell = primerDiaSemana + ultimoDiaMes;

  // hacemos un bucle hasta 42, que es el máximo de valores que puede
  // haber... 6 columnas de 7 dias
  for (var i = 1; i <= 42; i++) {
    if (i == primerDiaSemana) {
      // determinamos en que dia empieza
      dia = 1;
    }
    if (i < primerDiaSemana) {
      // celda mes anterior y siguiente
      resultado += "<td class='ayer'><a class='ayer' href='javascript:select_pordias();'>" + (ultimoDiaMes - (primerDiaSemana - i - 1)) + "</a></td>";
    } else if (i >= last_cell) {
      if (i % 7 == 0) {
        resultado += "<td class='post' style='color: #fd9292'><a class='red' href='javascript:select_pordias();'>" + a++ + "</a></td>";
      } else {
        resultado += "<td class='post' style='color: #cccccc'><a class='post' href='javascript:select_pordias();'>" + a++ + "</a></td>";
      }
    } else {
      // mostramos el dia
      if (dia == actual.getDate() && month == actual.getMonth() + 1 && year == actual.getFullYear())
        resultado += "<td class='hoy' ><a class='hoy' href='javascript:select_pordias();'>" + dia + "</a></td>";
      else
        resultado += "<td><a class='negro' href='javascript:select_pordias();'>" + dia + "</a></td>";
      dia++;
    }

    if (i % 7 == 0) {
      if (dia > ultimoDiaMes)
        break;
      resultado += "<tr></tr>\n";
    }
  }
  resultado += "</tr>";



  var meses = Array("ENERO", "FEBRERO", "MARZO", "ABRIL", "MAYO", "JUNIO", "JULIO", "AGOSTO", "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE");



  // Calculamos el siguiente mes y año
  nextMonth = month + 1;
  nextYear = year;
  if (month + 1 > 12) {
    nextMonth = 1;
    nextYear = year + 1;
  }

  // Calculamos el anterior mes y año
  prevMonth = month - 1;
  prevYear = year;
  if (month - 1 < 1) {
    prevMonth = 12;
    prevYear = year - 1;
  }
  if (month + 1 > 12) {
    meses[month] = meses[0];
  }
  if (month + 1 > 12) {
    meses[month + 1] = meses[1];
  }
  if (month >= 11 && month < 12) {
    meses[month] = meses[11];
    meses[month + 1] = meses[0];
  }
  if (month - 1 < 1) {
    meses[month - 2] = meses[11];
    meses[month - 3] = meses[10];
  }
  if (month - 1 > 0 && month - 1 <= 1) {
    meses[month - 2] = meses[0];
    meses[month - 3] = meses[11];
  }
  document.getElementById("calendar").getElementsByTagName("tbody")[0].innerHTML = resultado;
  document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML = "<div>" + year + "</div><div>" + meses[month - 1] + "</div><div><a onclick='mostrarCalendario(" + prevYear + "," + prevMonth + ")'>&lt;</a></div><div><a onclick='mostrarCalendario(" + nextYear + "," + nextMonth + ")'>&gt;</a></div><div>" + meses[month - 3] + "</div><div>" + meses[month + 1] + "</div><div>" + meses[month - 2] + "</div><div>" + meses[month] + "</div>";

}
#calendar {
  font-family: Arial;
  font-size: 12px;
}

#calendar caption {
  text-align: center;
  padding: 5px 10px;
  background-color: white;
  font-weight: bold;
  font-size: medium;
  margin-bottom: 30px;
}

#calendar caption div:nth-child(1) {
  margin-bottom: 10px;
  text-align: center;
}

#calendar caption div:nth-child(2) {
  display: inline;
  margin-top: 5px;
  width: 20%;
}

#calendar caption div:nth-child(3) {
  text-align: left;
  float: left;
  color: #cccccc;
}

#calendar caption div:nth-child(4) {
  text-align: right;
  float: right;
  color: #cccccc;
}

#calendar caption div:nth-child(5) {
  float: left;
  width: 20%;
  color: #cccccc;
  font-size: 10px;
}

#calendar caption div:nth-child(6) {
  float: right;
  width: 20%;
  color: #cccccc;
  font-size: 10px;
}

#calendar caption div:nth-child(7) {
  float: left;
  width: 20%;
  color: #cccccc;
  font-size: 14px;
}

#calendar caption div:nth-child(8) {
  float: right;
  width: 20%;
  color: #cccccc;
  font-size: 14px;
}

#calendar caption div:nth-child(3) a {
  cursor: pointer;
}

#calendar caption div:nth-child(4) a {
  cursor: pointer;
}

#calendar th {
  background-color: white;
  padding: 22px;
  width: 40px;
}

#calendar td {
  text-align: center;
  padding: 2px 5px;
  background-color: white;
  font-size: 20px;
  color: black;
}

#calendar td:nth-child(7) {
  color: red;
}

#calendar .hoy {
  background-color: grey;
  color: black;
}

#calendar .ayer {
  color: #cccccc;
}

#calendar .post {
  color: #cccccc;
}

#calendar .negro {
  color: black;
}

#calendar .red {
  color: #fd9292;
}

#calendar td:nth-child(7) a {
  color: red;
}

#calendar td:nth-child(7) a.red {
  color: #fd9292;
}

a {
  color: black;
  text-decoration: none
}
<!DOCTYPE html>
<html lang="es">

<head>
  <script src="js/semanal.js"></script>
  <meta charset="utf-8">
</head>

<body>
  <center>
    <table id="calendar">
      <p>
        <caption></caption>
        <thead>
          <tr>
            <th>LUNES</th>
            <th>MARTES</th>
            <th>MIERCOLES</th>
            <th>JUEVES</th>
            <th>VIERNES</th>
            <th>SABADO</th>
            <th>DOMINGO</th>
          </tr>
        </thead>
        <tbody>
          <script>
            window.onload = function()
            {mostrarCalendario(actual.getFullYear(), actual.getMonth() + 1);}
          </script>
          <script>
            window.onclick = function() {
              var getInput = prompt(+year);
              localStorage.setItem("Year", getInput);
            }
          </script>
        </tbody>
    </table>
  </center>
</body>

</html>
    
asked by Joume Parra 08.06.2018 в 13:00
source

1 answer

0

Very good I made some changes in your code I keep in localstorage and I receive them in the file res.html I leave it here. USED TO KEEP AND RECEIVE AT LOCALSTORAGE:

var fecha = "El dia es: "+dia+ " El mes: "+mes+" El año: "+anio;    
localStorage.setItem('fecha', JSON.stringify(fecha));
    var fecha = localStorage.getItem('fecha');

JS LOOK WHERE I PUT THE COMMENT CHANGE

var actual = new Date();

function mostrarCalendario(year, month) {
  var now = new Date(year, month - 1, 1);
  var last = new Date(year, month, 0);
  var primerDiaSemana = (now.getDay() == 0) ? 7 : now.getDay();
  var ultimoDiaMes = last.getDate();
  var dia = 0;
  var resultado = "<tr>";

  var diaActual = 0;
  console.log(ultimoDiaMes);
  var a = 0;
  var b = ++a;
  var last_cell = primerDiaSemana + ultimoDiaMes;

  // hacemos un bucle hasta 42, que es el máximo de valores que puede
  // haber... 6 columnas de 7 dias
  for (var i = 1; i <= 42; i++) {
    if (i == primerDiaSemana) {
      // determinamos en que dia empieza
      dia = 1;
    }
    if (i < primerDiaSemana) {
      // celda mes anterior y siguiente
      resultado += "<td class='ayer'><a class='ayer' href='javascript:select_pordias();'>" + (ultimoDiaMes - (primerDiaSemana - i - 1)) + "</a></td>";
    } else if (i >= last_cell) {
      if (i % 7 == 0) {
      //CAMIOS ONCLICK Y QUITAMOS HREF
        resultado += "<td class='post' style='color: #fd9292'><a onclick='guardardia(this.id,"+year+","+month+")' id="+  a++ +" class='red' >" + a++ + "</a></td>";
      } else {
        resultado += "<td class='post' style='color: #cccccc'><a onclick='guardardia(this.id,"+year+","+month+")' id="+  a++ +" class='post' >" + a++ + "</a></td>";
      }
    } else {
      // mostramos el dia 
      //CAMIOS ONCLICK Y QUITAMOS HREF
      if (dia == actual.getDate() && month == actual.getMonth() + 1 && year == actual.getFullYear())
        resultado += "<td class='hoy' ><a onclick='guardardia(this.id,"+year+","+month+")' id="+ dia +" class='hoy' >" + dia + "</a></td>";
      else
        resultado += "<td><a class='negro' onclick='guardardia(this.id,"+year+","+month+")'id="+ dia +" >" + dia + "</a></td>";
      dia++;
    }

    if (i % 7 == 0) {
      if (dia > ultimoDiaMes)
        break;
      resultado += "<tr></tr>\n";
    }
  }
  resultado += "</tr>";



  var meses = Array("ENERO", "FEBRERO", "MARZO", "ABRIL", "MAYO", "JUNIO", "JULIO", "AGOSTO", "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE");



  // Calculamos el siguiente mes y año
  nextMonth = month + 1;
  nextYear = year;
  if (month + 1 > 12) {
    nextMonth = 1;
    nextYear = year + 1;
  }

  // Calculamos el anterior mes y año
  prevMonth = month - 1;
  prevYear = year;
  if (month - 1 < 1) {
    prevMonth = 12;
    prevYear = year - 1;
  }
  if (month + 1 > 12) {
    meses[month] = meses[0];
  }
  if (month + 1 > 12) {
    meses[month + 1] = meses[1];
  }
  if (month >= 11 && month < 12) {
    meses[month] = meses[11];
    meses[month + 1] = meses[0];
  }
  if (month - 1 < 1) {
    meses[month - 2] = meses[11];
    meses[month - 3] = meses[10];
  }
  if (month - 1 > 0 && month - 1 <= 1) {
    meses[month - 2] = meses[0];
    meses[month - 3] = meses[11];
  }
  document.getElementById("calendar").getElementsByTagName("tbody")[0].innerHTML = resultado;
  document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML = "<div>" + year + "</div><div>" + meses[month - 1] + "</div><div><a onclick='mostrarCalendario(" + prevYear + "," + prevMonth + ")'>&lt;</a></div><div><a onclick='mostrarCalendario(" + nextYear + "," + nextMonth + ")'>&gt;</a></div><div>" + meses[month - 3] + "</div><div>" + meses[month + 1] + "</div><div>" + meses[month - 2] + "</div><div>" + meses[month] + "</div>";

}
//CAMIBOS
function guardardia(dia, anio, mes){
    var fecha = "El dia es: "+dia+ " El mes: "+mes+" El año: "+anio;
    location.href ="res.html";
    localStorage.setItem('fecha', JSON.stringify(fecha));

}
function recogerdia(){
    var fecha = localStorage.getItem('fecha');
    document.getElementById('fecha').innerHTML = fecha;
}
#calendar {
    font-family: Arial;
    font-size: 12px;
  }
  
  #calendar caption {
    text-align: center;
    padding: 5px 10px;
    background-color: white;
    font-weight: bold;
    font-size: medium;
    margin-bottom: 30px;
  }
  
  #calendar caption div:nth-child(1) {
    margin-bottom: 10px;
    text-align: center;
  }
  
  #calendar caption div:nth-child(2) {
    display: inline;
    margin-top: 5px;
    width: 20%;
  }
  
  #calendar caption div:nth-child(3) {
    text-align: left;
    float: left;
    color: #cccccc;
  }
  
  #calendar caption div:nth-child(4) {
    text-align: right;
    float: right;
    color: #cccccc;
  }
  
  #calendar caption div:nth-child(5) {
    float: left;
    width: 20%;
    color: #cccccc;
    font-size: 10px;
  }
  
  #calendar caption div:nth-child(6) {
    float: right;
    width: 20%;
    color: #cccccc;
    font-size: 10px;
  }
  
  #calendar caption div:nth-child(7) {
    float: left;
    width: 20%;
    color: #cccccc;
    font-size: 14px;
  }
  
  #calendar caption div:nth-child(8) {
    float: right;
    width: 20%;
    color: #cccccc;
    font-size: 14px;
  }
  
  #calendar caption div:nth-child(3) a {
    cursor: pointer;
  }
  
  #calendar caption div:nth-child(4) a {
    cursor: pointer;
  }
  
  #calendar th {
    background-color: white;
    padding: 22px;
    width: 40px;
  }
  
  #calendar td {
    text-align: center;
    padding: 2px 5px;
    background-color: white;
    font-size: 20px;
    color: black;
  }
  
  #calendar td:nth-child(7) {
    color: red;
  }
  
  #calendar .hoy {
    background-color: grey;
    color: black;
  }
  
  #calendar .ayer {
    color: #cccccc;
  }
  
  #calendar .post {
    color: #cccccc;
  }
  
  #calendar .negro {
    color: black;
  }
  
  #calendar .red {
    color: #fd9292;
  }
  
  #calendar td:nth-child(7) a {
    color: red;
  }
  
  #calendar td:nth-child(7) a.red {
    color: #fd9292;
  }
  
  a {
    color: black;
    text-decoration: none
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</head>
<body>
        <center>
                <table id="calendar">
                  <p>
                    <caption></caption>
                    <thead>
                      <tr>
                        <th>LUNES</th>
                        <th>MARTES</th>
                        <th>MIERCOLES</th>
                        <th>JUEVES</th>
                        <th>VIERNES</th>
                        <th>SABADO</th>
                        <th>DOMINGO</th>
                      </tr>
                    </thead>
                    <tbody>
                      <script>
                        window.onload = function()
                        {mostrarCalendario(actual.getFullYear(), actual.getMonth() + 1);}
                      </script>
                      <script>
                        window.onclick = function() {
                          var getInput = prompt(+year);
                          localStorage.setItem("Year", getInput);
                        }
                      </script>
                    </tbody>
                </table>
              </center>
    
</body>
<script src="js.js"></script>
</html>
res.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body onload="recogerdia()">
    <div id="fecha"></div>
</body>
<script src="js.js"></script>
</html>
    
answered by 08.06.2018 в 14:31