Perdon a todos, me olvide subir mi codigo para solictar ayuda Este programa pretende almacenar 3 datos por separado en 3 contenederos, el problema es que no agrega una linea nueva con los datos t muestra en la misma fila los primeros ingresos junto con los segundos ingresos, ademas de indicar que 2 variables no están definidas. Todo un mal caso de programación.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Libro de Clases</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript">
// Contenedor 'fecha' de localStorage
const vfexa = JSON.stringify(["fecha-Json"]);
localStorage.setItem('cuno', localStorage.getItem('cuno') || vfexa);
console.log(vfexa);
// Contenedor 'curso' de localStorage
const vcurso = JSON.stringify(["curso-Json"]);
localStorage.setItem('cdos', localStorage.getItem('cdos') || vcurso);
console.log(vcurso);
// Contenedor 'ausentes' de localStorage
const vausentes = JSON.stringify(["ausentes-Json"]);
localStorage.setItem('ctres', localStorage.getItem('ctres') || vausentes);
console.log(vausentes);
// MODELO
let miv_fecha = JSON.parse(localStorage.getItem('cuno'));
let miv_curso = JSON.parse(localStorage.getItem('cdos'));
let miv_ausentes = JSON.parse(localStorage.getItem('ctres'));
console.log("segunda ->"+miv_fecha);
console.log("segunda ->"+miv_curso);
console.log("segunda ->"+miv_ausentes);
// VISTAS
function showView() {
let i=0, view="";
while(i < miv_fecha.length) {
view += `
<p>Fecha Clase :${miv_fecha[i++]}
-- Curso Clase :${miv_curso[i++]}
-- Asist Clase :${miv_ausentes[i++]}</p>`;
/* view += `
<li>Fecha Clase :${miv_fecha[i++]}</li>
<li>Curso Clase :${miv_curso[i++]}</li>
<li>Asist Clase :${miv_ausentes[i++]}</li>`;*/
};
return view;
};
// CONTROLADORES
function showContr() {
document.getElementById('lista').innerHTML = showView();
};
function addContrFecha() {
let p = document.getElementById('id_fecha').value;
miv_fecha.push(p);
localStorage.setItem('cuno', JSON.stringify(miv_fecha));
document.getElementById('lista').innerHTML = showView();
};
function addContrCurso() {
let p = document.getElementById('id_curso').value;
miv_curso.push(p);
localStorage.setItem('cdos', JSON.stringify(miv_curso));
document.getElementById('lista').innerHTML = showView();
};
function addContrAusentes() {
let p = document.getElementById('id_ausentes').value;
miv_ausentes.push(p);
localStorage.setItem('ctres', JSON.stringify(miv_ausentes));
document.getElementById('lista').innerHTML = showView();
};
// Eventos
document.addEventListener('click', ev => {
if (ev.target.matches('#addfecha')) addContrFecha();
})
// Eventos
document.addEventListener('click', ev => {
if (ev.target.matches('#addcurso')) addContrCurso();
})
// Eventos
document.addEventListener('click', ev => {
if (ev.target.matches('#addausentes')) addContrAusentes();
})
document.addEventListener('DOMContentLoaded', showContr);
</script>
</head>
<body>
<div class="container">
<h1>Asistencia</h1>
<p>Profesor</p>
<ul id="lista"> </ul>
<div class="ingreso">
<h3>Añadir Asistencia</h3>
<input type="text" id="id_fecha">
<button id="addfecha">Ingresar</button>
<h3>Añadir Curso</h3>
<input type="text" id="id_curso">
<button id="addcurso">Ingresar</button>
<h3>Añadir Ausentes</h3>
<input type="text" id="id_ausentes">
<button id="addausentes">Ingresar</button>
</div>
</div>
</body>
</html>
