问题描述
因此，我有一对具有onClick函数（称为timeline1（））的元素。 但是，该脚本在第一次单击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的第一次单击上运行。有关该函数为何未在div上运行的任何帮助第一次点击，但第二次点击将不胜感激。
TL; DR ：第一次单击元素不会运行其onClick，但是再次单击可以很好地运行它...帮助D：
1楼
实际上，您的脚本确实确实是第一次触发。
问题在于， 默认情况下 ， info1元素的height为5vh ，因此该函数在首次运行时处于else条件。
若要更正此问题，请在首次调用该功能之前设置info1.style.height = "5vh" ，或在else条件中设置所需的“首次单击”行为。