如何根据变量控制元素显示隐藏？我的JS代码为何未生效？

核心问题 #

1. 条件判断运算符错误：你写的if (num=1)是赋值操作，不是比较逻辑——这会把num强制设为1，同时表达式返回1（属于真值），导致永远只会执行隐藏元素的逻辑，不会走到else分支。正确的比较应该用===（全等判断）或者==（相等判断）。
2. 判断逻辑仅执行一次：页面加载时会运行一次那个if-else，但点击按钮修改num后，没有重新触发这个判断逻辑，所以元素状态不会跟着num的变化同步更新。

修正后的代码 #

JavaScript 部分 #

let num = 1;
// 提前缓存DOM元素，避免重复查询
const numElement = document.getElementById("Num");
const asdfElement = document.getElementById("asdf");

// 初始化页面状态
updateNumDisplay();
updateAsdfVisibility();

// 增减num的函数
function next() {
  num++;
  updateNumDisplay();
  updateAsdfVisibility();
}

function before() {
  num--;
  updateNumDisplay();
  updateAsdfVisibility();
}

// 抽离重复逻辑，提升代码复用性
function updateNumDisplay() {
  numElement.innerHTML = num;
}

function updateAsdfVisibility() {
  if (num === 1) {
    asdfElement.style.visibility = "hidden";
  } else {
    asdfElement.style.visibility = "visible";
  }
}

HTML 部分 #

<div id="Num"></div>
<button onclick="before()">before</button>
<button onclick="next()">next</button>
<div id="asdf">asdf</div>

额外优化说明 #

• 用let声明num变量，避免隐式全局变量带来的潜在问题
• 提前缓存DOM元素，减少重复调用getElementById的性能开销
• 将重复的显示逻辑抽成独立函数，让代码更整洁易维护

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