'OnClick' 功能在第一次点击时未运行，需要第二次点击答案

【问题标题】：'OnClick' function not running on first click, a second click is required'OnClick' 功能在第一次点击时未运行，需要第二次点击
【发布时间】：2025-11-26 19:50:02
【问题描述】：

所以，我有一对元素具有称为timeline1() 的onClick 函数。但是，第一次单击 div 时脚本不会运行，但在再次单击后运行良好。下面是 HTML 代码：

<div class="Section_Timeline_Bullet">
            <div class="Section_Timeline_Bullet_Connector"></div>
            <img src="images/RightArrow.png" id="RightArrow1" onclick="timeline1()">
            <div class="Section_Timeline_Bullet_Info" id="Info1" onclick="timeline1()">12/02/2019</div>
        </div>

这是应从第一次点击开始运行的相应 Javascript 函数：

function timeline1() {
var arrow1 = document.getElementById('RightArrow1');
var info1 = document.getElementById('Info1');

if (info1.style.height == "5vh") {
    arrow1.classList.add("Section_Timeline_Rotated_Image_Up");
    arrow1.style.transition = "all 0.5s ease";
    arrow1.style.left = "-0.65vw";
    info1.style.top = "-42vh";
    info1.style.height = "20vh";
    info1.style.transition = "all 0.5s ease";
} else {
    arrow1.classList.remove("Section_Timeline_Rotated_Image_Up");
    arrow1.style.transition = "0";
    arrow1.style.left = "-0.5vw";
    info1.style.height = "5vh";
    info1.style.top = "-27vh";
    info1.style.transition = "0";
}

}

只有arrow1.classList.add("Section_Timeline_Rotated_Image_Up); 部分是旋转图像，它仍然不会在第一次单击 div 时运行。任何关于为什么该功能在第一次点击时不运行但在第二次点击时运行的帮助将不胜感激。

TL;DR：第一次单击元素不会运行其 onClick，但再次单击会正常运行...帮助 D：

【问题讨论】：

标签： javascript html css function onclick

【解决方案1】：

您的脚本实际上确实是第一次触发。问题是您的info1 元素在默认下没有5vh 的height，因此该函数在第一次运行时属于else 条件。要更正此问题，请在第一次调用函数之前设置 info1.style.height = "5vh"，或在 else 条件中设置所需的“首次点击”行为。

【讨论】：