网站双页面不同字符串Typewriter打字机效果失效问题

问题根源 #

控制台报错Could not find container element，说明Typewriter初始化时找不到目标DOM元素，核心原因有两个：

• JS代码在DOM元素渲染完成前就执行了
• 两个页面共用同一JS文件，代码同时尝试初始化两个页面的元素，当前页面不存在的元素触发报错，中断后续代码执行

解决方案 #

方案1：DOM加载完成后再执行代码，且按需初始化 #

把初始化代码放在DOM加载完成的回调里，同时检查当前页面是否存在对应元素，只初始化存在的实例：

document.addEventListener('DOMContentLoaded', function() {
  // 西班牙语页面元素存在则初始化
  const spanishEl = document.getElementById('typewriter');
  if (spanishEl) {
    new Typewriter(spanishEl, {
      strings: ['hoteles', 'restaurantes', 'agencias de viaje', 'guía de turistas', 'resorts', 'tour operadores', 'eventos', 'hostales', 'cafés', 'y muchos más'],
      autoStart: true,
      loop: true,
    });
  }

  // 英语页面元素存在则初始化
  const englishEl = document.getElementById('english-typewriter');
  if (englishEl) {
    new Typewriter(englishEl, {
      strings: ['hotels', 'restaurants'],
      autoStart: true,
      loop: true,
    });
  }
});

方案2：拆分JS代码，按需引入 #

为两个页面分别准备独立的JS文件，只引入对应页面需要的代码：

• 西班牙语页面引入spanish-script.js：

new Typewriter('#typewriter', {
  strings: ['hoteles', 'restaurantes', 'agencias de viaje', 'guía de turistas', 'resorts', 'tour operadores', 'eventos', 'hostales', 'cafés', 'y muchos más'],
  autoStart: true,
  loop: true,
});

• 英语页面引入english-script.js：

new Typewriter('#english-typewriter', {
  strings: ['hotels', 'restaurants'],
  autoStart: true,
  loop: true,
});

额外检查项 #

• 确认英语页面HTML中id="english-typewriter"的元素拼写无错误
• 检查Typewriter库在英语页面是否正确加载（script标签路径、引入顺序是否正确）

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