CODEWITHSUNDEEP
javascriptdom-events
axmug
axmug

Reputation: 466

Cannot insert a function in click event

I can't insert the indexOf function in the click event of a listener. It shows me the following error:

Uncaught TypeError: v.indexOf is not a function

The code where is the error:

function mostrar_datos(resp) {


    let tabla = document.getElementsByClassName("table");
    let fila = '';
    let curso = '';
    let version = '';
    let programa = '';
    let accion = '';
    let anyadir = '';
    let editar = '';
    let borrar = '';
    const indice = 0;       
    
    for(let i = 0; i < resp.length; i++) {
        
        fila = tabla[0].insertRow(1); 
        curso = fila.insertCell(0);
        version = fila.insertCell(1);
        programa = fila.insertCell(2);
        accion = fila.insertCell(3);    
        
        curso.innerHTML = resp[i].nombre_c;
        version.innerHTML = resp[i].version;
        programa.innerHTML = resp[i].contenido;
                
        accion.innerHTML = '<a class="add" title="" data-toggle="tooltip"><i class="fas fa-plus"></i><a class="edit" title="" data-toggle="tooltip"><i class="fas fa-pen"></i><a class="delete" color="blue" title="" data-toggle="tooltip"><i class="fas fa-trash"></i>';
        
        document.getElementsByClassName("edit")[0].addEventListener("click", function() {
            
            t = document.querySelector(".table");
            v = t.getElementsByTagName('td');
            indice = v.indexOf(resp[i].nombre_c); // error indexOf is not a funtion
        });
        
    }
 }

v is an HTMLCollection that is a simple index array. I thought that indexOf cannot be used in that case and I tried to change it for a function created by me in the following way:

function mostrar_datos(resp) {


    let tabla = document.getElementsByClassName("table");
    let fila = '';
    let curso = '';
    let version = '';
    let programa = '';
    let accion = '';
    let anyadir = '';
    let editar = '';
    let borrar = '';
    const indice = 0;       
    
    for(let i = 0; i < resp.length; i++) {
        
        fila = tabla[0].insertRow(1); 
        curso = fila.insertCell(0);
        version = fila.insertCell(1);
        programa = fila.insertCell(2);
        accion = fila.insertCell(3);    
        
        curso.innerHTML = resp[i].nombre_c;
        version.innerHTML = resp[i].version;
        programa.innerHTML = resp[i].contenido;
                
        accion.innerHTML = '<a class="add" title="" data-toggle="tooltip"><i class="fas fa-plus"></i><a class="edit" title="" data-toggle="tooltip"><i class="fas fa-pen"></i><a class="delete" color="blue" title="" data-toggle="tooltip"><i class="fas fa-trash"></i>';
        
        document.getElementsByClassName("edit")[0].addEventListener("click", function() {
            
            t = document.querySelector(".table");
            v = t.getElementsByTagName('td');
            editar("curso"); // error editar is not a funtion
        });
    }
}

function editar() {

     $(this).parents("tr").find("td:not(:last-child)").each(function(){
        $(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
    });     
    
    $(this).parents("tr").find(".add, .edit").toggle();
    
    $(".add-new").attr("disabled", "disabled");
}

Why I can't insert a function in this click event?

Thanks

Upvotes: 1

Views: 126

Answers (4)

secan
secan

Reputation: 2679

Remember that, even if you convert an HTMLCollection into an Array, each item will still be an HTMLElement therefore you cannot simply do yourArrayOfElements.indexOf(resp[i].nombre_c) (I am assuming resp[i].nombre_c is a string, not a HTMLElement).

You will need to do something like:

const v = t.getElementsByTagName('td');
const indice = [...v].findIndex(elem => elem.innerText.indexOf(resp[i].nombre_c) > -1);
// OR const indice = [...v].findIndex(elem => elem.innerHTML.indexOf(resp[i].nombre_c) > -1);

Upvotes: 0

Aritra Bhattacharyya
Aritra Bhattacharyya

Reputation: 11

In the scope mostrar_datos editar is assigned a string value. That's why the error.

Upvotes: 0

Mayur Kukadiya
Mayur Kukadiya

Reputation: 2747

You can find indexOf using this code :

t = document.querySelector(".table");
v = [...t.getElementsByTagName('td')];
indice = v.indexOf(resp[i].nombre_c);

Upvotes: 1

Jamiec
Jamiec

Reputation: 136154

v is an HTMLCollection that is a simple index array.

No, it's not. As you said it's an HTMLCollection which does not have an indexOf method

You can however copy all the items to a simple array using the spread syntax (...)

v = t.getElementsByTagName('td');
indice = [...v].indexOf(resp[i].nombre_c);

editar("curso"); // error editar is not a funtion

Well editar is not defined (as a function) anywhere in the code posted here, are you sure it's defined in your actual project?

Upvotes: 1

Related Questions