如何用JavaScript将按钮中<h3>和<p>元素内容传至另一页面（含undefined问题）

核心原因 #

你用.value来获取jobTitles和jobSubtitles的内容，但.value仅适用于表单输入类元素（比如input、textarea）。如果这些元素是普通文本容器（比如div、h2、p），调用.value会直接返回undefined。

解决方法 #

• 替换内容获取方式：把.value换成.textContent（仅获取纯文本，推荐）或.innerHTML（会包含HTML标签）
  修改Careers.html里的对应代码：

  var title = jobTitles[0].textContent;
  var subtitle = jobSubtitles[0].textContent;
  

• 确保DOM加载完成后执行脚本：避免因为元素还未渲染就执行代码导致获取不到目标元素，可将脚本包裹在DOMContentLoaded事件中：

  document.addEventListener('DOMContentLoaded', function() {
      var jobButtons = document.getElementsByClassName("button");
      var jobTitles = document.getElementsByClassName("button_title");
      var jobSubtitles = document.getElementsByClassName("subtitle");
  
      if (jobButtons[0]) {
          jobButtons[0].addEventListener('mousedown', function () {
              var title = jobTitles[0].textContent;
              var subtitle = jobSubtitles[0].textContent;
          
              localStorage.setItem("job_header", title);
              localStorage.setItem("job_subheader", subtitle);
  
              window.location.replace("CareerOffer.html");
          })
      }
  });
  

• 验证元素匹配正确性：

  • 检查HTML中目标元素的类名是否为button_title和subtitle，无拼写错误
  • 确认CareerOffer.html中存在id="job_header"和id="job_subheader"的对应元素

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