ins1.addEventListener 不是函数

Question

我最近在使用 javascript 代码时遇到问题。单击 3 次后，脚本将其<ins data-ad-slot="4092520690">参数更改为<ins data-ad-slot-"9020596432">。但是有一个轻微的控制台错误。它说“ins1.addEventListener 不是函数”。javascript代码：$(document).ready(function(){        if(sessionStorage.getItem('ins')){            const ins1 = document.getElementsByTagName('4092520690');            var newIns = sessionStorage.getItem('ins');            var newParam = sessionStorage.getItem('param')            ins1.param = newParam;            ins1.innerText = newIns;        }    });    function replaceAfter3Clicks(elem, newElem) {        let count = 0;        ins1.addEventListener('click', () => {            count ++;            if (count === 3) {                sessionStorage.clear(); // Clear all sessionStorage                sessionStorage.setItem('ins', "ins 2"); // First param is the name and the second is the value                sessionStorage.setItem('data-ad-slot', "4092520690");// First param is the name and the second is the value                elem.parentNode.replaceChild(newElem, elem);            }         });    }    const ins1 = document.getElementsByTagName('4092520690');    // pre-made second div for future replacement    const ins2 = document.createElement('ins');    ins2.param = '9020596432';    ins2.innerText = 'ins 2';    replaceAfter3Clicks(ins1, ins2);有人可以启发我线的问题是什么ins1.addEventListener('click', () => { 并且 replaceAfter3Clicks(ins1, ins2);是。

Answer 1

你的问题是这ins1不是一个元素，而是一个类似数组的元素对象。并且数组（也不是类似数组的对象）不能添加事件侦听器。

您需要做的是查看ins1并向其中的每个元素添加一个事件侦听器；就像是：

function replaceAfter3Clicks(elem, newElem) {

    let count = 0;

    let callback = function() {

        count ++;

        if (count === 3) {

            sessionStorage.clear(); // Clear all sessionStorage

            sessionStorage.setItem('ins', "ins 2"); // First param is the name and the second is the value

            sessionStorage.setItem('data-ad-slot', "4092520690");// First param is the name and the second is the value

            elem.parentNode.replaceChild(newElem, elem);

        }

    };

    Array.from(ins1).forEach(element => {

        element.addEventListener('click', callback);

    }

});

Answer 2

你有：

const ins1 = document.getElementsByTagName('4092520690');

.getElementsByTagName()返回一个节点列表。.addEventListener()仅适用于节点，而不适用于整个节点列表。另外（仅供参考）.getElementsByTagName()就是这样做的，并且4092520690不是有效的标签名称，因此您可能应该重新考虑一下您的 HTML。

使用“vanilla”JavaScript，您必须在每个节点ins1的执行中迭代节点，.addEventListener()或者您可以在这些节点的祖先上设置侦听器并检查event.target以查看实际触发事件的节点是否为一个您关心的，如果是，请采取相应的行动。

但是，由于您无论如何都在使用 JQuery，因此您可以将行更改为：

const ins1 = $("some valid selector");

ins1.on('click', () => { ... });