Selector de etiquetas: código de programa

Escribir el código script

Con los algoritmos a la vista pasamos a la escritura del código Javascript.

En este caso la tarea es sencilla y los algoritmos prácticamente nos han resuelto el problema, solo queda codificar en javascript lo escrito en lenguaje natural

Tareas iniciales:

Asignar los gestores de eventos click a los bloques donde están las etiquetas en lugar de asignarlos a cada etiqueta es más simple en este caso. Deja el código más sencillo y es prácticamente igual de eficaz.

Asignar el gestor del evento click a botón de enviar

    //Tareas iniciales

    document.querySelector(".tagsDisp").addEventListener('click', asignarTag);

    document.querySelector(".tagsAsig").addEventListener('click', quitarTag);

    document.querySelector(".btnEnviar").addEventListener('click', enviarTags);

Función asignarTags

Al pulsar con el ratón en las barras de etiquetas se activa la función del gestor aunque no pulsemos sobre una etiqueta.

Lo primero es detectar si se ha pulsado en la barra o en la etiqueta. En la asignación de tagas el elemento event.currentTarget es la barra de etiquetas, y event.target el elemento sobre el que se ha pulsado, si son iguales no se ha pulsado sobre la etiqueta y no se hace nada. Es una manera sencilla de detactar el elemento pulsado y fácil de entender.

El resto de la función sigue lo escrito en el algoritmo.

    function asignarTag(){

       if(event.target != event.currentTarget){

          let etiqueta = event.target;

          let bloque = document.createElement('div');

          bloque.appendChild(etiqueta);

          let barAsig = document.querySelector('.tagsAsig');

          let quitar = document.createElement('button');

          quitar.setAttribute('type','button');

          quitar.innerText = "x";

          bloque.appendChild(quitar);

          barAsig.appendChild(bloque);

          }

    return;

    }

Función quitarTag

Detectamos que el elemento puslado es el botón de eliminar (button), en este caso usamos el tipo del elemento pulsado, si no es button no hacemos nada.

    function quitarTag(){

       let etiqueta = event.target;

       if(etiqueta.type == "button"){

       let bloque = etiqueta.parentNode.children[0];

       let barDisp = document.querySelector('.tagsDisp');

       barDisp.appendChild(bloque);

       let barAsig = document.querySelector('.tagsAsig');

       barAsig.removeChild(etiqueta.parentNode)

       }

    return;

    }

Enviar los datos

Este será el gestor del evento para el botón enviar. Sigue el proceso de creación del elemento form,

  1. Crear form y ponerle sus atributos
  2. Crear el input y asignarle los atributos
  3. Añadir input al form
  4. añadir form al documento

    function enviarTags(){

       let form = document.createElement('form');

       let input = document.createElement('input');

       let barAsig = document.querySelector('.tagsAsig');

       let tags = extractTags(barAsig);

       input.setAttribute('value', tags);

       input.setAttribute('name', "tags");

       form.appendChild(input);

       form.setAttribute('method', 'post');

       form.setAttribute('action', 'verdatos.php');

       form.setAttribute('style', 'display:none');

       document.body.appendChild(form);

       form.submit();

       }

     

    function extractTags(bloque){

       let items = bloque.querySelectorAll("div span:first-of-type");

       let ret = []

       for(let i = 0; i < items.length; i++)

       {

       ret.push(items[i].innerText)

       }

       return ret.join(" | ");

       }

 

Leer etiquetas

Es el subproceso de extraer una lista de etiquetas del bloque de tags asignadas. La cadena se devuelve usando una barra vertical como separador.

    function extractTags(bloque){

       let items = bloque.querySelectorAll("div span:first-of-type");

       let lista = []

       for(let i = 0; i < items.length; i++)   {

          lista.push(items[i].innerText);

       }

       return lista.join(" | ");

       }

Escribe todos estos códigos en un único archivo de nombre tags.js (que ya deberá estar linkado en la página web)

Solo queda comprobar que todo funciona correctamente y tendremos finalizado nuestro selector de tags

Comentarios

En el código te he puesto dos maneras de identificar si el evento click se produce en el elemento que queremos. Una por el tipo y otra por el buble de los eventos.  Hay más formas de hcerlo pero estas son muy simples y no complican el HTML.

En el envío podría haberse usado un Ajax, o mejor aún, un Fetch. Uso la creación del formulario para ilustrar como javascript maneja el DOM.

El archivo php para ver los datos es tan simple como esto:

    <?

    if (count($_POST)>0){
    echo "<p>Los datos (enviados por POST) son</p>";
    foreach ($_POST as $clave => $valor)
    {
    echo "<p><b>$clave:</b> $valor";
    }
    }
    ?>

Guardalo en un archivo html con el nombre verdatos.php

bajocod