开发者问题收集

目标字符串太长时，随机出现未捕获的 TypeError、innerHTML 为空错误

2018-09-03
55
javascript typeerror

当我尝试使用 innerHTML 来 console.log 带有 comment 类的 p 标签的内容时，我收到此错误，前三个始终有效。但它只是偶尔发生，似乎是随机的。我注意到的唯一模式是，当字符串不超过 50 个字符时，它始终有效。

Uncaught TypeError：无法在 HTMLDivElement.card.addEventListener (<anonymous>:90:59) 处读取 null 的属性“innerHTML”

我尝试使用 getElementsByClassName("card")[0] 而不是 querySelector(".card") ，但结果相同。此外，在这种情况下我无法使用 ID，因为页面上的 card 元素数量未知。

HTML： 

<div class="card">
    <input type="checkbox" hidden />
    <div>
        <div>
            <p class="mini-card date">Fri, 07 Sept</p>
            <p class="mini-card length">20 mins</p>
            <p class="mini-card type">Practice session</p>
        </div>
        <p class="comment">This text is 50 characters loooooooooooooooooooong</p>
    </div>
</div>

JavaScript： 

var cards = document.querySelectorAll(".card");
        Array.from(cards).forEach(card => {
            card.addEventListener("click", (event) => {
                console.log(event.target.querySelector(".date").innerHTML);
                console.log(event.target.querySelector(".length").innerHTML);
                console.log(event.target.querySelector(".type").innerHTML);
                console.log(event.target.querySelector(".comment").innerHTML);
            });
        });

任何帮助都将非常有帮助，谢谢！

2个回答

我必须查看一个可行的示例才能确定，但​​我相信当它抛出错误时，您直接单击最内层的 div 元素。由于“.comment”不是所述元素的子元素，因此 querySelector 返回 null。

为了获得一致的结果，您可以使用 Event.currentTarget 而不是 Event.target，因为它将始终指向您附加事件处理程序的元素（在本例中为 div class="card"）

Haltesh
2018-09-03
var cards = document.querySelectorAll(".card");
Array.from(cards).forEach(card => { 
    var data = {
      date: card.querySelector(".date").innerHTML,
      length: card.querySelector(".length").innerHTML,
      type: card.querySelector(".type").innerHTML,
      comment: card.querySelector(".comment").innerHTML
    }
    card.addEventListener("click", (event) => {
          console.log(data)
    });
});
<div class="card">
    <input type="checkbox" hidden />
    <div>
        <div onclick="">
            <p class="mini-card date">Fri, 07 Sept</p>
            <p class="mini-card length">20 mins</p>
            <p class="mini-card type">Practice session</p>
        </div>
        <p class="comment">This text is 50 characters loooooooooooooooooooongeeeeerrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr</p>
    </div>
</div>

解释： 这与长度无关，但与目标有关。即使单击子元素，事件处理程序也会触发。如果您调用查询选择器，它将无法找到其他元素的兄弟元素。您的案例恰好就是这种情况。

享受

andylamax
2018-09-03