javascript - JS : Function called after first time results in null error

Question

我只是在玩，然后转到 CNN 文章并在控制台中运行此代码。这个想法是能够点击p元素，它将用一个包含反向文本的节点替换 DOM 节点。它按预期工作，但只有一次。当我尝试再次运行它以将其反转时，我在控制台中遇到了错误，我不知道为什么:

TaggedEventTracker.js:56 Uncaught TypeError: Cannot read property 'dataset' of null
    at e.findNearestZjsOrAElement (TaggedEventTracker.js:56)
    at e.findNearestZjsOrAElement (TaggedEventTracker.js:63)
    at e.trackTaggedEvent (TaggedEventTracker.js:73)
    at HTMLDocument.<anonymous> (TaggedEventTracker.js:17)

代码:

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach(para => {
   para.onclick = function(evt) {
       updateText(evt.target)
   }
})


function updateText(target) {

     let node = target;

     let nodeText = target.innerHTML;

     let newEl = document.createElement('p');
     
     newEl.innerHTML = [...nodeText].reverse().join("");
     node.parentNode.replaceChild(newEl, node);
}

Answer 1

为什么要创建一个新节点来替换旧节点？您可以只替换原始元素的innerHTML。
当您替换元素时，看起来他们的事件跟踪器坏了。
此外，通过替换节点，您还可以替换与其关联的事件处理程序。

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach(para => {
   para.onclick = function(evt) {
       updateText(evt.target)
   }
})


function updateText(target) {
     target.innerHTML = [...target.innerHTML].reverse().join("");
}

<p>`123456789</p>
<p>`123456789</p>
<p>`123456789</p>

如果您想保留原始功能并仍然替换文本，您将需要克隆节点并附加一个新的事件处理程序。

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach(para => {
   para.onclick = function(evt) {
       updateText(evt.target)
   }
})


function updateText(target) {

     let node = target;

     let nodeText = target.innerHTML;

     let newEl = target.cloneNode();
     
     newEl.innerHTML = [...nodeText].reverse().join("");
     node.parentNode.replaceChild(newEl, node);
     
    newEl.onclick = function(evt) {updateText(evt.target)}
}

<p>12233</p>
<p>x3332233</p>