时间戳

首页 > 解决方案 > JS 跳过第一个事件的 if 语句

javascript - JS 跳过第一个事件的 if 语句

问题描述

HiddenUI 以及 HiddenElements 应该在按下 Enter 时显示。

这有效，但仅在我第二次按“Enter”时。我的 toggleHiddenElements 函数中的 if 语句第一次跳过第一个 if 语句并直接跳转到 else。（用调试器检查）。

但它确实在我第二次按 Enter 时按预期工作。

/*toggle view hiddenUI and hidden elements*/

function toggleHiddenElements() {
  let HiddenUI = document.getElementById("hiddenUI");
  let HiddenElements = document.getElementsByClassName("deactivated");
  if (HiddenUI.style.display == "none") { /*jumps to else the first time I press Enter
    HiddenUI.style.display = "block";
    for (let i = 0; i < HiddenElements.length; i++) {
      HiddenElements[i].style.display = "block";
    }
  } else {
    HiddenUI.style.display = "none";
    for (let j = 0; j < HiddenElements.length; j++) {
      HiddenElements[j].style.display = "none";

    }
  }
}


/* EventListener for "Enter" Keybind */

document.addEventListener("keydown", (e) => {
  if (e.code == "Enter") {
    e.preventDefault();
    toggleHiddenElements();
  }
});

完整代码可以在这里找到

标签： javascripthtmlcss

解决方案

HTMLElement.style属性仅表示在元素的内联样式属性中设置的 CSS 声明，因此第一次运行 toggleHiddenElements() 时，HiddenUI.style.display是一个空字符串。

要修复您的代码，您可以使用window.getComputedStyle()最初获取您在 CSS 中设置的样式：

if (window.getComputedStyle(HiddenUI).display == "none") {
  HiddenUI.style.display = "block";
  for (let i = 0; i < HiddenElements.length; i++) {
    HiddenElements[i].style.display = "block";
  }
} else {
  HiddenUI.style.display = "none";
  for (let j = 0; j < HiddenElements.length; j++) {
    HiddenElements[j].style.display = "none";
  }
}

更多信息： 为什么初始 CSS 样式在 DOM 元素 .style 字段上不可见？

推荐阅读