修改的JavaScript代码在PHP网站不生效，请求技术排查

我在JavaScript中添加的模态框逻辑无法在网站上显示，本地VS编辑器里的代码包含完整的模态框功能，但网站上的代码缺少这部分内容。尝试将网站从PHP转为HTML后问题依旧，怀疑是版本兼容或代码存在错误，需要可行的排查思路。

本地VS中的JS代码 #

$( function() {
    $( "#accordion" ).accordion({
        collapsible: true
    });
} );

function replaceClass(id, oldClass, newClass) {
    var elem = $(`#${id}`);
    if (elem.hasClass(oldClass)) {
        elem.removeClass(oldClass);
    }
    elem.addClass(newClass);
}
 
$(document).ready(function() {
    $("#darkmode").click(function() {
        replaceClass("garden", "light", "dark");
    });
 
    $("#lightmode").click(function() {
        replaceClass("garden", "dark", "light");
    });
});

document.addEventListener('DOMContentLoaded', function() {
    
    const deadline = new Date(2024, 11, 26);
    let timerId = null;
    function declensionNum(num, words) {
      return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
    }
    function countdownTimer() {
      const diff = deadline - new Date();
      if (diff <= 0) {
        clearInterval(timerId);
      }
      const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
      const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0;
      const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0;
      const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;
      $days.textContent = days < 10 ? '0' + days : days;
      $hours.textContent = hours < 10 ? '0' + hours : hours;
      $minutes.textContent = minutes < 10 ? '0' + minutes : minutes;
      $seconds.textContent = seconds < 10 ? '0' + seconds : seconds;
      $days.dataset.title = declensionNum(days, ['день', 'дня', 'днів']);
      $hours.dataset.title = declensionNum(hours, ['година', 'години', 'годин']);
      $minutes.dataset.title = declensionNum(minutes, ['хвилина', 'хвилини', 'хвилин']);
      $seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунди', 'секунд']);
    }
    const $days = document.querySelector('.timer__days');
    const $hours = document.querySelector('.timer__hours');
    const $minutes = document.querySelector('.timer__minutes');
    const $seconds = document.querySelector('.timer__seconds');
    countdownTimer();
    timerId = setInterval(countdownTimer, 1000);
  });

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

网站上的JS代码 #

$( function() {
    $( "#accordion" ).accordion({
        collapsible: true
    });
} );

function replaceClass(id, oldClass, newClass) {
    var elem = $(`#${id}`);
    if (elem.hasClass(oldClass)) {
        elem.removeClass(oldClass);
    }
    elem.addClass(newClass);
}
 
$(document).ready(function() {
    $("#darkmode").click(function() {
        replaceClass("garden", "light", "dark");
    });
 
    $("#lightmode").click(function() {
        replaceClass("garden", "dark", "light");
    });
});

document.addEventListener('DOMContentLoaded', function() {
    
    const deadline = new Date(2024, 11, 26);
    let timerId = null;
    function declensionNum(num, words) {
      return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]];
    }
    function countdownTimer() {
      const diff = deadline - new Date();
      if (diff <= 0) {
        clearInterval(timerId);
      }
      const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0;
      const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0;
      const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0;
      const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;
      $days.textContent = days < 10 ? '0' + days : days;
      $hours.textContent = hours < 10 ? '0' + hours : hours;
      $minutes.textContent = minutes < 10 ? '0' + minutes : minutes;
      $seconds.textContent = seconds < 10 ? '0' + seconds : seconds;
      $days.dataset.title = declensionNum(days, ['день', 'дня', 'днів']);
      $hours.dataset.title = declensionNum(hours, ['година', 'години', 'годин']);
      $minutes.dataset.title = declensionNum(minutes, ['хвилина', 'хвилини', 'хвилин']);
      $seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунди', 'секунд']);
    }
    const $days = document.querySelector('.timer__days');
    const $hours = document.querySelector('.timer__hours');
    const $minutes = document.querySelector('.timer__minutes');
    const $seconds = document.querySelector('.timer__seconds');
    countdownTimer();
    timerId = setInterval(countdownTimer, 1000);
  });

排查思路 #

• 确认文件部署完整性：检查本地修改后的JS文件是否已正确上传至服务器对应目录，覆盖旧文件。可通过浏览器开发者工具的Sources面板，对比线上JS文件内容与本地是否一致。
• 清除浏览器缓存：浏览器可能缓存了旧JS文件，按Ctrl+Shift+R强制刷新页面，或在开发者工具Network面板勾选“禁用缓存”后重新加载。
• 检查代码语法与元素存在性：打开浏览器控制台（F12）查看是否有报错。模态框代码中document.getElementById("myModal")等语句，若页面无对应ID元素，会导致btn/modal为null，后续事件绑定报错。
• 调整DOM加载顺序：模态框代码未包裹在DOMContentLoaded或$(document).ready()中，若JS文件在页面元素前加载，会无法获取元素。建议将模态框代码放入DOMContentLoaded回调，或把JS文件放在页面底部加载。
• 检查jQuery兼容性：代码同时使用jQuery和原生DOM操作，确保jQuery已正确加载，版本无兼容问题。比如$(function(){})正常执行说明jQuery可用，但需确认模态框相关元素确实存在于页面中。
• 检查服务器静态文件缓存：部分服务器会对JS/CSS设置缓存过期时间，导致新修改文件无法立即生效。可查看服务器配置，或在文件名后添加版本号（如script.js?v=1.1）强制浏览器加载新文件。

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