时间戳

首页 > 解决方案 > 'OnClick' 功能在第一次点击时未运行，需要第二次点击

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

问题描述

因此，我有一对元素具有称为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：

标签： javascripthtmlcssfunctiononclick

解决方案

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

推荐阅读