基于其他 div 内容的 Javascript 条件显示/隐藏 div答案

【问题标题】：Javascript conditional show/hide div based on other div's content基于其他 div 内容的 Javascript 条件显示/隐藏 div
【发布时间】：2021-05-13 12:42:28
【问题描述】：

我正在尝试动态地对未达到特定级别的用户隐藏内容。

所有用户都可以看到级别 1 的内容，但他们需要达到更高级别才能看到更多内容。

级别将通过使用 Wordpress 插件短代码在 html 标记 (id="level") 内生成。 2 级或更高级别的内容将默认隐藏在 html div 标签 (id="myDiv") 中。

我正在尝试通过 javascript 函数从 myDiv 更改样式显示属性。

function myFunction()
{
  var myDiv = document.GetElementById("myDiv");
  var level = document.GetElementById("level").innerHTML;
  if (level >= 2) {
      myDiv.style.display  = "block";
  } else {
    myDiv.style.display  = "none";
  }
}

<body onLoad="myFunction();">
  <div id="level">2</div>
  <div id="myDiv" style="display:none;">myDiv content</div>
</body>

【问题讨论】：

你不应该在前端这样做。绕过限制很简单——任何人都可以打开开发人员工具并删除您的保护。相反，您应该在后端进行过滤，并且只向用户提供他们有权访问的内容。
另外：GetElementById 应该是 getElementById
您还应该 not be using inline HTML event attributes 并避免使用内联 CSS 样式，而是通过 .classList API 添加/删除/切换 CSS 类。
@VLAZ 感谢您强调这一点。访问确实是从后端管理的，我只是想在这里管理可见性。访问权限是根据时间线授予/删除的，我不希望用户看到指向他们尚未被授予访问权限的内容的链接。

标签： javascript html

【解决方案1】：

Element.innerHTML 将始终返回string，尝试使用Number(level) 将您的innerHTML 转换为数字

function myFunction()
{    
    let myDiv = document.getElementById("myDiv");
    let stringLevel = document.getElementById("level").textContent;
    const level = Number(stringLevel);
    if (level >= 2) {
        myDiv.style.display  = "block";
    } else {
        myDiv.style.display  = "none";
    }
}

（编辑）

考虑使用 textContent 而不是 Scott Marcus 指出的 innerHTML

【讨论】：

更好的是，根本不要使用.innerHTML，而是使用.textContent，因为.innerHTML 使用了HTML 解析器并引入了安全和性能问题。