如何实现按钮首次点击显示Ad、再次点击显示Content的功能？

你的代码逻辑存在问题：每次点击按钮时，先把ads设为true，紧接着的if判断会立刻隐藏广告、显示内容，导致首次点击也看不到广告，直接跳转到内容。

修复方案 #

我们需要用状态变量记录当前是首次点击还是后续点击，首次点击显示广告，之后点击固定显示内容。

修正后的HTML（结构不变） #

<div>
  <button class="btn">Click Me</button>
  <h1 style="display: none" class="ad">Ad</h1>
  <h1 style="display: none" class="cnt">Content</h1>
</div>

修正后的JavaScript #

const btn = document.querySelector('.btn');
const ad = document.querySelector('.ad');
const cnt = document.querySelector('.cnt');

let hasClickedOnce = false; // 记录是否已经点击过一次

btn.addEventListener('click', () => {
  if (!hasClickedOnce) {
    // 首次点击：显示广告，隐藏内容
    ad.style.display = 'block';
    cnt.style.display = 'none';
    hasClickedOnce = true;
  } else {
    // 非首次点击：隐藏广告，显示内容
    ad.style.display = 'none';
    cnt.style.display = 'block';
  }
});

逻辑说明 #

• hasClickedOnce初始为false，表示还未点击过按钮
• 首次点击时，进入if分支：显示广告，将状态标记为已点击过一次
• 之后每次点击，进入else分支：隐藏广告，显示内容，确保后续点击不再展示广告

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