按钮点击无响应求助：无法实现div显示状态切换效果

嘿，我一眼就看到了几个导致按钮点击无反应的问题，咱们一个个来解决：

1. 最致命的错误：JS脚本引入方式完全错了！ #

你在HTML里用了 <style src="/secondvid.js"></style> 来加载JS文件——这可不行！<style> 标签是用来处理CSS样式的，浏览器根本不会去加载里面的JS脚本，导致你的 showSecondVid 函数根本不存在，点击按钮自然没任何反应。

修正后的引入代码：

<script src="/secondvid.js"></script>

2. localStorage 类型问题（潜在bug） #

你的 dayUp 函数里，localStorage 存储的值都是字符串类型，直接和数字比较会出现逻辑错误（比如第一次访问时 localStorage.dayFinished 是 undefined，后续存的也是字符串）。而且没有初始化逻辑，第一次运行会出问题。

修正后的 dayUp 函数：

function dayUp() {
  // 先把存储的值转成数字，不存在就初始化为0
  let dayFinished = parseInt(localStorage.dayFinished) || 0;
  
  if (dayFinished === 4) {
    dayFinished = 0;
  } else {
    dayFinished++;
  }
  
  // 存回localStorage（显式转字符串更稳妥）
  localStorage.dayFinished = dayFinished.toString();
}

3. 按钮选择器的健壮性优化（可选但推荐） #

原代码用 document.querySelectorAll('button')[0] 来隐藏按钮，如果后续页面新增其他按钮，这个选择器可能会选中错误的按钮。建议给按钮加个专属ID：

HTML修改：

<button id="show-second-vid-btn" onclick="showSecondVid('vid1', 'vid2');">Video 2</button>

JS对应修改：

document.getElementById('show-second-vid-btn').style.display = "none";

完整修正后的代码 #

HTML部分： #

<!DOCTYPE html>
<html>
<head>
  <!-- some title, meta stuff and css -->
</head>
<body>
  <script src="/secondvid.js"></script>
  <div id="vid1">第一个视频容器</div>
  <button id="show-second-vid-btn" onclick="showSecondVid('vid1', 'vid2');">Video 2</button>
  <div id="vid2" style="display: none;">第二个视频容器</div>
</body>
</html>

JS部分： #

function showSecondVid(vid1Id, vid2Id) {
  document.getElementById(vid1Id).style.display = "none";
  document.getElementById(vid2Id).style.display = "block";
  document.getElementById('show-second-vid-btn').style.display = "none";
  dayUp();
}

function dayUp() {
  let dayFinished = parseInt(localStorage.dayFinished) || 0;
  if (dayFinished === 4) {
    dayFinished = 0;
  } else {
    dayFinished++;
  }
  localStorage.dayFinished = dayFinished.toString();
}

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