点击其他div时修改指定class元素背景色的问题排查与实现

核心错误说明 #

你的代码存在4个直接导致功能失效的问题：

• 选择器语法错误：使用document.querySelector匹配class类名时，必须在类名前加.前缀，你写的querySelector('post-main-content')是在查找标签名为post-main-content的元素，根本匹配不到对应class的div，这一步返回值为null，后续绑定事件会直接抛出异常。
• 变量赋值逻辑错误：addEventListener方法没有返回值，将其执行结果赋值给backChange根本无法获取到DOM节点。
• 引用逻辑错误：事件回调的参数e是事件实例对象，上面不存在backChange属性，访问e.backChange会直接触发引用错误。
• HTML结构错误：你贴出的代码中<p>标签没有正确闭合，还额外多写了一个无效的<p>开标签，不符合HTML语法规范，可能引发样式、元素选择的异常。

另外你描述的需求是点击一个div修改另一个指定class的div，但给出的HTML中只有一个class为post-main-content的div，没有提供触发点击的元素，下面示例默认触发点击的div类名为click-btn，你可以根据实际业务替换类名。

正确实现代码 #

场景1：点击Adiv修改另一个Bdiv的背景（匹配你的需求描述） #

HTML部分：

<!-- 触发点击的div -->
<div class="click-btn">点击修改内容区背景</div>
<!-- 待修改背景的目标div -->
<div class="post-main-content">
    <br /><hr />
    <p>
    <br />
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, 
    iusto quasi eum, delectus, soluta aliquam modi suscipit non fuga fugiat 
    nemo ullam eos? Eaque soluta esse, dolore voluptates vitae sunt 
    recusandae libero provident accusantium ex nemo quaerat quidem cumque 
    corrupti voluptatibus cum debitis assumenda sequi veniam corporis quam 
    </p>
</div>

JavaScript部分：

// 选中触发点击的元素，class选择器必须加.前缀
const trigger = document.querySelector('.click-btn');
// 选中要修改背景的目标元素
const targetContent = document.querySelector('.post-main-content');

// 绑定点击事件
trigger.addEventListener('click', function() {
    // 直接修改目标元素的背景色
    targetContent.style.backgroundColor = 'black';
    // 可选：修改文字颜色为白色，避免黑底黑字无法阅读
    targetContent.style.color = 'white';
})

场景2：点击div自身修改自身背景 #

如果不需要两个不同的div，点击当前div就改自己的背景，可以简化代码：

const content = document.querySelector('.post-main-content');
content.addEventListener('click', function() {
    content.style.backgroundColor = 'black';
    content.style.color = 'white';
})

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