无法在点击事件中插入函数答案

【问题标题】：Cannot insert a function in click event无法在点击事件中插入函数
【发布时间】：2021-07-14 12:51:56
【问题描述】：

我无法在监听器的点击事件中插入 indexOf 函数。它向我显示以下错误：

未捕获的类型错误：v.indexOf 不是函数

错误所在的代码：

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 是一个 HTMLCollection，它是一个简单的索引数组。我认为 indexOf 在这种情况下不能使用，我尝试通过以下方式为我创建的函数更改它：

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

为什么我不能在这个点击事件中插入函数？

谢谢

【问题讨论】：

似乎编辑器未声明为函数。它被声明为一个空字符串
无论您如何将 HTMLCollection 转换为数组，数组中的项目都将是 HTMLElements。假设nombre_c 是一个字符串，当您尝试调用yourElement.indexOf(nombre_c) 时，您将不断收到错误消息。相反，您应该致电yourElement.innerText.indexOf(nombe_c)（或yourElement.innerHTML.indexOf(nombe_c)）

标签： javascript dom-events

【解决方案1】：

v 是一个 HTMLCollection，它是一个简单的索引数组。

不，不是。正如你所说，这是一个 HTMLCollection，它没有 indexOf 方法

但是，您可以使用扩展语法 (...) 将所有项目复制到一个简单的数组中

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

editar("光标"); // 错误编辑器不是函数

editar 没有在此处发布的代码中的任何地方定义（作为函数），您确定它是在您的实际项目中定义的吗？

【讨论】：

是的。我没有添加它。它是在 mostrar_datos(resp) 函数之前定义的函数
问题是，如果我调用函数编辑器，它会出现错误编辑器不是函数。我不知道为什么
最后我在不使用 indexOf 方法的情况下修复了它，因为我意识到我不需要它。编辑器功能代码我插入到AddEventListener中。

【解决方案2】：

您可以使用此代码找到 indexOf ：

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

【讨论】：

【解决方案3】：

在范围 mostrar_datos 编辑器中分配了一个字符串值。这就是错误的原因。

【讨论】：

【解决方案4】：

请记住，即使您将 HTMLCollection 转换为数组，每个项目仍将是一个 HTMLElement，因此您不能简单地执行 yourArrayOfElements.indexOf(resp[i].nombre_c)（我假设 resp[i].nombre_c 是一个字符串，而不是一个 HTMLElement）。

您需要执行以下操作：

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

【讨论】：