Color Flipper doesn't work: Javascript, DOM

[Vishal55]

const btn = document.getElementById("btn");

btn.addEventListener("click", function(){
  document.style.background-color =  "red";
});

<div id ="bck">
  <button id="btn">Flip Color</button>
  </div>

#bck {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  background-color: #ffa700; 
}

#btn{
  height: 125px;
  width: 300px;
  background-color: #008744;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 30px;
  font-family: courier;
  }

[Exotic]

It should be →

const btn = document.getElementById("btn");

btn.addEventListener("click", function(){
  document.body.style.backgroundColor =  "red";
});

If you are trying to change the color of the div, just access it with document.getElementById("bck") and use the style property similar to the above example.