基于计算值显示不同Div元素的JavaScript实现问题求助

看起来你遇到的核心问题是页面初始化时没有自动执行判断逻辑，只有点击按钮才会触发div显示，而且还没明确怎么获取并控制目标div的显示状态。咱们一步步来搞定：

1. 先给目标div加上唯一ID #

首先确保你要切换的两个div有唯一的ID，这样JS能精准找到它们：

<!-- 符合条件时显示的y div -->
<div id="yDiv" class="hidden">这是(x <= total)时展示的内容</div>
<!-- 不符合条件时显示的z div -->
<div id="zDiv" class="hidden">这是(x > total)时展示的内容</div>

<!-- 你的按钮 -->
<button type="button" onclick="show('fixingSteps');">What Do I Need To Do?</button>
<!-- 假设你的fixingSteps容器 -->
<div id="fixingSteps" class="hidden">修复步骤内容...</div>

2. 用CSS统一管理显示隐藏 #

先定义一个通用的隐藏类，避免直接操作元素style，更符合前端最佳实践：

.hidden {
  display: none;
}

3. 抽离判断逻辑，支持自动触发 #

把判断显示的逻辑做成独立函数，这样既可以在按钮点击时调用，也能在页面加载时自动执行：

// 假设你的surlyValue已经正确赋值，total是你的对比基准值
function toggleDivsByCondition() {
  const x = surlyValue; // 用你已有的计算值surlyValue作为判断变量x
  const total = 50; // 替换成你的实际total数值

  // 获取两个目标div
  const yDiv = document.getElementById('yDiv');
  const zDiv = document.getElementById('zDiv');

  // 根据条件切换显示状态
  if (x <= total) {
    yDiv.classList.remove('hidden');
    zDiv.classList.add('hidden');
  } else {
    yDiv.classList.add('hidden');
    zDiv.classList.remove('hidden');
  }
}

// 修改你的show函数，同时触发判断逻辑
function show(divId) {
  // 原来的show逻辑：显示fixingSteps
  const targetDiv = document.getElementById(divId);
  targetDiv.classList.remove('hidden');
  
  // 同步执行div切换逻辑
  toggleDivsByCondition();
}

// 页面加载完成后自动执行一次判断，确保初始状态正确
window.addEventListener('load', toggleDivsByCondition);

关键注意点 #

• 如果surlyValue是异步获取的（比如从接口拉取），要等数据返回后再调用toggleDivsByCondition，否则会拿不到正确值
• 所有要控制的div必须有唯一ID，避免获取元素出错
• 页面加载时的自动执行逻辑能让用户打开页面就看到正确的div，不用依赖按钮点击

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