如何基于其他div存储的用户等级用JS条件显示/隐藏指定div

问题修复说明 #

你写的代码存在2个核心问题：

• JavaScript 对大小写敏感，document.GetElementById写法错误，正确方法名是document.getElementById（首字母小写），原写法会调用失败无法获取DOM元素
• 从#level标签中取到的innerHTML是字符串类型，直接和数字做比较存在隐式类型转换风险，建议先显式转为数值再判断

修正后完整代码 #

JavaScript 代码 #

function myFunction() {
  const myDiv = document.getElementById("myDiv");
  const levelEle = document.getElementById("level");
  // 增加元素存在性判断，避免页面结构变动时报错
  if (!myDiv || !levelEle) return;
  // 取等级值并转为整数，先trim去除前后可能存在的空格
  const userLevel = parseInt(levelEle.innerHTML.trim(), 10);
  myDiv.style.display = userLevel >= 2 ? "block" : "none";
}

HTML 代码 #

<body onload="myFunction();">
  <div id="level">2</div>
  <div id="myDiv" style="display:none;">2级及以上用户可见内容</div>
</body>

补充注意事项 #

前端仅做展示层的隐藏，无法作为安全控制手段，用户可以通过手动修改DOM属性、控制台执行JS的方式绕过前端限制看到隐藏内容。如果是付费、私密类的敏感内容，一定要在WordPress服务端渲染页面时就判断用户等级，未达标用户不要输出对应内容到页面中。

内容的提问来源于stack exchange，提问作者Jelz