如何根据变量改变传单中的圆圈颜色？

<div id="circle"></div>

#circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: red; /* 初始颜色为红色 */
}

var circle = document.getElementById("circle");
var variable = "blue"; // 假设变量的值为蓝色

if (variable === "red") {
  circle.style.backgroundColor = "red"; // 如果变量的值为红色，则设置圆圈的背景颜色为红色
} else if (variable === "blue") {
  circle.style.backgroundColor = "blue"; // 如果变量的值为蓝色，则设置圆圈的背景颜色为蓝色
} else {
  circle.style.backgroundColor = "green"; // 其他情况下，设置圆圈的背景颜色为绿色
}