如何使h1颜色变化时，点击它的容器？

<div id="container">
  <h1>标题</h1>
</div>

#container {
  width: 200px;
  height: 200px;
  background-color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

h1 {
  color: black;
}

var container = document.getElementById("container");
var h1 = document.querySelector("h1");

container.addEventListener("click", function() {
  h1.style.color = "red";
});