通过onclick函数修改JS插入DOM的div元素颜色问题

你的代码存在两个核心问题，导致点击按钮后看不到背景色变化：

1. HTML转义错误：你用<和>代替了<和>，这会把HTML标签转义成纯文本，页面不会渲染出带样式的div元素，自然看不到背景色效果。
2. 未同步DOM更新：changeColor函数里只修改了color变量，但没有重新更新容器的innerHTML，变量变化无法反映到页面上。

另外还有个细节问题：style属性值应该用引号包裹，避免潜在的语法错误。

修正后的完整代码 #

HTML #

<div class="container"></div>
<button onclick="changeColor()">Click</button>

CSS #

body {
  font-size: 2rem;
  font-weight: 900;
}

.container {
  border: 5px solid;
  width: 250px;
  height: 100px;
}

JavaScript #

let value = true
const container = document.querySelector(".container")
let color = ""

// 初始化页面内容
updateContainer()

function changeColor() {
  value = !value
  console.log(value)
  // 根据value切换样式
  color = value ? "background-color:purple" : ""
  // 更新页面内容
  updateContainer()
  console.log(color)
}

// 封装更新容器内容的函数
function updateContainer() {
  container.innerHTML = `<div style="${color}">This is a TEST</div>`
}

关键修改说明 #

• 替换</>为真实的</>，确保HTML标签能被浏览器正常解析渲染。
• 新增updateContainer函数，统一负责更新容器的innerHTML，在初始化和点击按钮后都调用，保证变量变化同步到页面。
• style属性值用双引号包裹（style="${color}"），符合HTML语法规范，避免潜在的解析问题。
• 初始color设为空字符串，去掉多余空格，避免影响样式解析。

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