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', () => { ... });