javascript - 脾气暴躁的 JavaScript : function works only sometimes

Question

我有一个 JavaScript 函数，但有时只能工作。有时我会收到 Uncaught TypeError: Cannot read property of undefined ，有时该函数会按预期工作。

为了清楚地解释和演示这个问题，我录制了这个短视频:https://youtu.be/uSSes2_DPXU

这是我的功能:

function openLightBox() {
    var itemId = event.target.id; 
    var lightBox = document.getElementsByClassName(itemId);
    console.log(lightBox);
    lightBox[0].style.display = 'block' ;
}

解决方案

最终 HTML:

<a onClick="openLightBox(<?php echo get_the_ID()?>)">

最终的 JS:

function openLightBox(id) {
    var lightBox = document.getElementsByClassName(id);

    console.log(lightBox);
    lightBox[0].style.display = 'block';
}

Answer 1

它有时起作用的原因(我在这里有点猜测)取决于您单击元素的位置。既然你已经包装了你的a标签 div持有 id 的，是你的 a标签很好地包裹着 div维度方面？

实际上，将 id 添加到 a 会更有意义。标签。

<a onClick="openLightBox(<?php echo get_the_ID()?>)">

那么你的函数将是这样的:

function openLightBox(id) {
    var lightBox = document.getElementById(id);

    console.log(lightBox);
    lightBox.style.display = 'block';
}

extra info: event bubbling and target -vs- currentTarget