第一次单击时未运行“ OnClick”功能,需要再次单击

时间:2019-02-13 03:04:39

标签: javascript html css function onclick

因此,我有一对具有onClick函数(称为timeline1())的元素。但是,该脚本在第一次单击div时不会运行,但在再次单击后仍可以正常运行。以下是HTML代码:

if(somecondition){
   $names[] = 'Bobby';
   $names[] = 'Nail';
}

这是应该从第一次单击开始运行的相应Javascript函数:

<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>

}

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"; } 唯一的 部分是旋转图像,该图像仍然不会在div的第一次单击上运行。对于该功能为何不能在第一次单击时运行但在第二次单击时运行的任何帮助,将不胜感激。

TL; DR :第一次单击元素不会运行其onClick,但是再次单击可以很好地运行...帮助D:

1 个答案:

答案 0 :(得分:1)

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