Cannot insert a function in click event

Question

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

It seems as editar is not declared as a function. It is declared as an empty string — Lazar Nikolic
– Lazar Nikolic, Commented Jul 14, 2021 at 12:55
Regardless of how you convert the HTMLCollection to an Array, the items in your array will be HTMLElements. Assuming nombre_c is a string, when you try to call yourElement.indexOf(nombre_c) you will keep getting an error. Instead you should call yourElement.innerText.indexOf(nombe_c) (or yourElement.innerHTML.indexOf(nombe_c)) — secan
– secan, Commented Jul 14, 2021 at 13:18

Jamiec · Accepted Answer · 2021-07-14 12:57:41Z

1

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?

answered Jul 14, 2021 at 12:57

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

axmug Over a year ago

Yes. I didn't add it. It is a function defined forward of mostrar_datos(resp) function

axmug Over a year ago

The problem is that if I call function editar it appears the error editar is not a function. I don't know why

axmug Over a year ago

Finally I fixed it without using indexOf method because I realised that I didn't need it. Editar function code I inserted it in the AddEventListener.

Mayur Kukadiya · Accepted Answer · 2021-07-14 12:57:46Z

1

You can find indexOf using this code :

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

answered Jul 14, 2021 at 12:57

Mayur Kukadiya

2,8173 gold badges35 silver badges64 bronze badges

Comments

Aritra Bhattacharyya · Accepted Answer · 2021-07-14 12:59:46Z

0

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

answered Jul 14, 2021 at 12:59

Aritra Bhattacharyya

112 bronze badges

Comments

secan · Accepted Answer · 2021-07-14 13:50:21Z

0

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);

edited Jul 14, 2021 at 13:50

answered Jul 14, 2021 at 13:31

secan

2,6771 gold badge9 silver badges24 bronze badges

Collectives™ on Stack Overflow

Cannot insert a function in click event

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related