Cómo hacer un evento de click con JavaScript

Hoy vamos a crear un calendario de click en Javascript para poder agregar o eliminar tareas.

 

 

El primer paso (dependiendo de si el script lo hemos puesto antes del body o después) es añadir un controlador de evento que nos ejecute una función cuando la página esté cargada:

document.addEventListener("DOMContentLoaded", main, false);

 

¿Dónde ponemos el controlador evento? En este caso lo ponemos en la tabla para optimización de la página, ya que si declaramos un controlador de evento click en cada día estaremos saturando la página:

function main(){
  //Añadimos el evento a la tabla
  tabla.addEventListener("click", Fc, false);
}

 

Cuando se detecte un evento click en la tabla, se invocará a su manejador. Lo que nos interesa saber es donde se ha hecho click, por lo que recogemos el nodo donde se ha producido el evento y actuar en consecuencia. También recogemos la clase ya que con ella identificamos si ese elemento tiene ya tareas o no (se podría identificar evento.children.length). El motivo del bucle while es porque en un día con tareas podemos pinchar en la tarea en vez de en el propio TD.

function Fc(event){
  var evento=event.target;//Guardamos el elemento sobre el que se ha disparado el evento
  var clase; //Identificamos la clase del elemento
 //Bucle para ascender a TD sisse ha pulsado sobre un elemento más específico que TD
 if(evento.nodeName!="TH"){
   while(evento.nodeName!="TD"){
    evento=evento.parentNode;
   }
 }else{
  event.preventDefault();
  return false;
 }
 clase=event.className;
 //identificar si el TD tiene la clase tarea o no
 if(clase==""){
  nuevaTarea(evento);
 }else if(clase=="tarea"){
  classTarea(evento);
 }
}

 

Nota: La condición para detectar un nodo TH se podría quitar si en la tabla del html diferenciamos las partes con <thead> <tfoot> <tbody> y agregásemos el controlador al tbody en vez de a toda la tabla.

 

Agregamos la función de nuevaTarea(). Esta función es la que vamos a  utilizar para añadir una tarea en un TD sin tareas. Al hacer click, lo primero que ocurre es que nos sale el prompt pidiéndonos algún dato para introducir. Si a ese prompt no le metemos ningún dato y pinchamos en aceptar o pulsamos en cancelar directamente, no ocurre nada. En caso de meter algún dato, creamos los nodos pertinentes y le añadimos el dato del prompt al nodo li, agregamos el li en el ul y, por último, cogemos el evento (siempre devolverá un TD) y le agregamos ul. Finalmente,  agregamos el atributo para saber que ese día ya tiene tareas.

function nuevaTarea(evento){
  var st=prompt("Añade una nueva tarea");
  //Verificamos si la cadena es valida
  if(st!=null && st.trim()!='' && st!=undefined){
   var ul=document.createElemnt("ul"), li=docmunet.createElement("li"), text=document.createTextNode(st);//Creamos los elementos necesarios
   
   li.appendChild(text);
   ul.appendChild(li);
   evento.appendChild(ul);
   console.log(evento);
   evento.setAttribute("class", "tarea");//Establecemos una clase para que se aplique el estilo e identificarla posteriormente
   }
}

 

¿Qué pasa cuando ya tenemos tareas en un día? Daremos la opción de añadir una nueva tarea o eliminar una tarea. Esta función es algo más compleja. Vayamos por partes:

Este será el prompt que daremos:

 

 

En el caso de que el usuario introduzca un 1 en el prompt, se añadirá una nueva tarea. Para esto identificamos el UL y le añadimos una nueva tarea a las que ya estuvieran con appendChild():

function classTarea(evento){
	var ul=evento.getElementsByTagName("ul")[0];//Obtener UL del TD
	var st=prompt("Introduzca opción: \n1-->añadir\n2-->borrar");
	var eleLi=' ';//Variableque se usará para mostrar los li al seleccionar la opcion de BORRAR
	
        //Identificar la opción introducida: 1-> Añadir, 2->Borrar
	if(!isNaN(Number(st)) && Number(st)==1){
	  console.log(evento.childern[0].childElementCount);
	  var cadena=prompt("Introduzca tarea:");

	//Verificamos si la cedena es valida
	if(cadena!=null && cadena.trim()!='' && cadena!=undefined){
	 var cadenaNode=document.createTextnode(cadena);//Creamos el nodo texto con la tarea
	 var li=document.createElement("li");
	 li.appendChild(cadenaNode);//Añadimos el nodo texto a un nodo Li
	 console.log(evento.children[0].childElementCount);
	 evento.children[0].appendChild(li);//Seleccionamos el ul del TD seleccionado y añadimos el nodo Li


	}
	}

}

 

En el caso de que el usuario introduzca la opción 2, devolveremos las tareas que ya tenga:

 

 

Recorremos los li y los vamos agregando a la variable eleLi. Le pedimos al usuario qué elemento quiere borrar y mostramos sus elementos. Cuando el usuario introduzca el número del elemento hijo, lo borramos con parentNode.removeChild y comprobamos cada vez que se borre una tarea si existen más para borrar el ul y eliminar la clase del td.

}else if(!isNaN(Number(st)) && number(st)==2){
	
	//Bucle para mostrar los Li que hay en el TD
	for(var i=0; i<evento.children[0].getElementsByTagName("li").length; i++){
		eleLi+="["+i+"]"+evento.children[0].getElementsByTagName("li")[i].textContent+"\n";
	}
	st=prompt("Elige el elemento a borrar:\n"+(eleLi));
	//Eliminar el elemento que se ha introducido
	if(st!=null && st.trim()!='' && st!=undefined){
	ul.removechild(ul.children[Number(st)]);
	}
	//Eliminar el nodo Ul si no tiene hijod y eliminar la clase del Td
	if(ul.children.length==0){
		ul.parentNode.removeChild(ul);
		evento.removeAttribute("class");

	}
 }
}