页面加载切换文本并上滑时控制台报TypeError，break使用出错求助

1. Uncaught TypeError 错误原因及解决 #

你遇到的类型错误源于数组越界访问：

• texts 是包含5个元素的DOM集合（索引范围0-4），当i自增到5时（等于texts.length），texts[i]对应的值为undefined。
• 代码在执行clearInterval(interval)后，没有终止回调函数的执行，后续依然尝试访问texts[i].style，自然会抛出“无法读取undefined的style属性”的错误。

修复方案：在触发clearInterval后，立即用return终止回调函数，避免后续代码执行：

if (i === texts.length) {
  clearInterval(interval);
  lta.className = "last_text_active";
  roll.style.top = '-100vh';
  return; // 终止后续代码，避免访问undefined
}

2. break 语句报错原因及解决 #

break仅能用于循环语句（for/while）或switch分支结构，你在setInterval的回调函数中使用break不符合语法规则，因此会报错。

终止定时器的正确方式就是你已经用到的clearInterval(interval)，无需使用break。

修复后的完整JavaScript代码 #

window.addEventListener('load', function() {
  var texts = document.getElementsByClassName('loading-text');
  var roll = document.getElementById('loading-page');
  var lta = document.getElementById('last_text');
  var i = 0;
  var interval = setInterval(function() {
    texts[i].style.opacity = '0';

    i++;
    if (i === texts.length) {
      clearInterval(interval);
      lta.className = "last_text_active";
      roll.style.top = '-100vh';
      return; // 新增return，终止回调
    }
    texts[i].style.opacity = '1';
  }, 1000);
});

额外优化建议 #

• 将#loading-page的position改为fixed，否则top: -100vh可能无法按预期向上滑出视口（当前父容器为relative，定位会相对于父元素）。
• 给.loading-text添加transition: opacity 0.5s ease;，让文本透明度切换更平滑。

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