单个JS关联两个HTML文件时获取第二页DOM元素返回null问题求解

1. DOM获取时机错误：你把所有DOM元素获取逻辑直接写在JS全局顶级作用域，JS文件一旦加载就会立刻执行这些document.getElementById代码，对应页面不存在的元素自然返回null：第一个页面没有question、answer1这类测验页元素，所以相关变量初始值就是null；第二个页面没有首页的btnforquiz1这类按钮元素，对应变量也是null。
2. 页面跳转逻辑错误：执行location.href = "quiz.html"后，浏览器会立刻卸载当前页面加载新页面，跳转语句之后的quizNameRel = xxx、startQuiz()代码完全不会执行，且页面跳转后所有JS全局变量会全部重置，之前设置的quizNameRel值根本无法传递到新页面。
3. 语法与逻辑错误：
   • 拼写错误：cosnole.log应为console.log
   • 事件绑定错误：document.body.onload = showQuizzs()中加了括号相当于立刻执行函数并把返回值绑定给onload，应去掉括号写成document.body.onload = showQuizzs
   • 循环逻辑错误：showQuizzs里的循环写法完全没必要，直接按索引赋值按钮文本即可

1. 调整DOM获取逻辑 #

不要在全局提前获取所有DOM，改为在对应页面的加载函数中按需获取当前页面需要的元素。

2. 用URL参数传递测验选择信息 #

跳转时把用户选中的测验序号放到URL参数中，测验页加载时读取参数即可知道用户选择的测验。

3. 修正后的完整JS代码 #

// 全局仅存储公共数据和公共函数
let correct = 0
// 测验数据
const Quiz_1 = {
  "What is the capital of buffalo":["Idk", "Yes", "No",0],
  "What is the smell of poop": ["Stinky"]
};
const Quiz_2 = [
  "What is wrong with you"
];
const Quiz_3 = [
  "What is wrong with you #2"
]
const quiz = { 
  name: ["History Test", "Math Practice", "ELA Practice"],
  mappingtoans: [0,1,2],
  QA: [Quiz_1, Quiz_2, Quiz_3]
}

// 首页加载执行函数
function showQuizzs() {
  // 仅在首页加载时获取首页元素
  const btn1 = document.getElementById("btnforquiz1")
  const btn2 = document.getElementById("btnforquiz2")
  const btn3 = document.getElementById("btnforquiz3")
  btn1.textContent = quiz.name[0]
  btn2.textContent = quiz.name[1]
  btn3.textContent = quiz.name[2]
}

// 首页跳转函数
function gotoquiz() {
  location.href = "quiz.html?quizIndex=0"
}
function gotoquiz1() {
  location.href = "quiz.html?quizIndex=1"
}
function gotoquiz2() {
  location.href = "quiz.html?quizIndex=2"
}

// 测验页加载执行函数
function quizLoad() {
  // 读取URL参数中的测验索引
  const urlParams = new URLSearchParams(window.location.search)
  const quizIndex = Number(urlParams.get('quizIndex'))
  // 仅在测验页加载时获取测验页元素
  const question = document.getElementById("question")
  const answer1 = document.getElementById("answer1")
  const answer2 = document.getElementById("answer2")
  const answer3 = document.getElementById("answer3")
  const answer4 = document.getElementById("answer4")
  console.log(question)
  console.log(answer1)
  startQuiz(quizIndex, question, [answer1, answer2, answer3, answer4])
}

function answerselect(elements){
  const whichone = Number(elements.id.slice(-2,-1))
  if(Quiz_1[whichone]==Quiz_1[-1]){
    correct+=1;
    NextQuestion();
  }else{
    wrong+=1;
  }
}

function getkeys(dictionary){
  return Object.keys(dictionary)
}

function setQuestion(questionEl, answerEls) {
  const tempdict = getkeys(Quiz_1)
  console.log(tempdict, getkeys(Quiz_1));
  // questionEl.innerHTML = tempdict;
}

function startQuiz(quizIndex, questionEl, answerEls) {
  switch (quizIndex){
    case 0:
      setQuestion(questionEl, answerEls)
      break
    case 1:
      // 对应测验逻辑
      break
    case 2:
      // 对应测验逻辑
      break
  }
}

// 首页绑定加载事件
if (document.getElementById('btnforquiz1')) {
  window.onload = showQuizzs
}

你第二个页面的<body onload="quizLoad()">不需要修改，加载测验页时会自动执行quizLoad函数读取参数、获取DOM。

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