0

He declarado la siguiente función que agrega un evento click a cada una de las celdas de una tabla HTML

// variables globales
let data = [];  
let c_key;

// función activada por el botón -recoger índice-
function cellSelector() {
    table.style.background = '#6165702c';
    // elimina todos los valores la siguiente vez que se llame a la funcion 
    data.splice(0);
    let td = table.querySelectorAll('td');

    c_key = true;
    td.forEach(c => {
        c.classList.add('td-hover');
        c.addEventListener('click', () => {
            // varible bandera que activara o desactivara el evento onclik 
            if (c_key) {
                // empujando índice cada vez que se realiza un click
                data.push(c.cellIndex);
                c.classList.add('td-selected');
            }
            
        });

        
    });

    td_action_flag = true;
    btn_done.disabled = false;
}

el objetivo es recolectar el índice de la celda a la que se le ha hecho click para realizar operaciones diversas a través de la manipulación del DOM. ej: guardar texto de la celda.

recoge correctamente los índices de las celdas y los gurda en un array (data), el problema reside cuando el botón que activa la función es nuevamente presionado este realiza la captura de los índices pero a la vez duplica los valores

aclaración:

se presiona el botón recoger índice por primera vez, luego se hace click sobre las celdas deseadas - guarda en el array data[index_1, index_2] (muestra por consola). Operación Completada.

Se presiona el botón recoger índice nuevamente, guarda en el array data[index_1, index_1, index_2, index_2] duplicando los datos por cada llamada a la función

Espero me haya explicado bien. Gracias.

2
  • 1
    Pon la declaracion de la variable data dentro de la función así cada vez que se ejecuta la función ese array estará vacío. si no va a duplicar resultados
    – Suso
    el 18 jun. 2022 a las 23:41
  • tan sencillo, muchas gracias. Aunque he declarado también una variable externa para poder así mostrar el contenido del array data[] desde otro lugar
    – Lester
    el 19 jun. 2022 a las 0:52

1 respuesta 1

0

He realizado los siguiente:

// variables globales
let c_key; 
let container; // variable global contenedora

// función activada por el botón -recoger índice-
function cellSelector() {

let data = [];
table.style.background = '#6165702c';
// elimina todos los valores la siguiente vez que se llame a la funcion 

let td = table.querySelectorAll('td');

c_key = true;
td.forEach(c => {
    c.classList.add('td-hover');
    c.addEventListener('click', () => {
        // varible bandera que activara o desactivara el evento onclik 
        if (c_key) {
            // empujando índice cada vez que se realiza un click
            data.push(c.cellIndex);
            c.classList.add('td-selected');
        }
    
    });
});

td_action_flag = true;
btn_done.disabled = false;

// almacenando array dentro de variable container
container = data;

data.splice(0);
}

para solucionar el problema del duplicado, he declarado el array data dentro de la función, y para tener a mano los valores de este lo he almacenado en una variable contenedora que esta declarada como variable global

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.