原生JS实现点击按钮切换图片失效问题排查

• script标签使用错误：带有src属性的<script>标签内部不能编写自定义代码，浏览器只会加载并执行src指向的外部脚本（此处为Bootstrap的JS文件），标签内的DOMContentLoaded监听代码完全未被执行。必须将自定义JS单独放在一个不带src的<script>标签中，或者移至<body>标签末尾。

• 图片路径一致性问题：初始图片路径为./England.jpeg，切换时写的是England2.jpeg，缺少./前缀。虽然当前页面下可能能正常解析，但如果页面路径发生变化（比如处于子目录中），会导致图片无法找到，建议保持路径写法一致。

• 元素获取验证：若修复script标签后仍失效，可在事件回调中添加console.log(eng, btn1)，确认这两个元素是否被正确获取，排查是否存在ID拼写错误的问题。

修复后的核心代码示例 #

<!-- 将Bootstrap的script与自定义script分开 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        let eng = document.querySelector("#eimg");
        let btn1 = document.querySelector("#eswitch");
        btn1.addEventListener('click', function(){
            eng.src = './England2.jpeg'; // 保持路径前缀一致
        })
    })
</script>

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