JS switch onlick between two colors w/ if else - if-statement

Question

I'm working on my portfolio and need to switch between to stylings states of an element. Currently, I'm trying to make it work on the following example. In this particular case, my goal is to click the button and switch between green and red background with every click. But something won't work. I can switch from green to red, but not from red to green. What am I missing?
<button id="button">Toggle</button>
<div class="test" id="test"></div>
.test {
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
}
var btn = document.getElementById("button");
var test = document.getElementById("test");
btn.onclick = function() {
if (test.style.background = "green") {test.style.background = "red";} else {test.style.background = "green";}};
Codepen Demo https://codepen.io/yanniksturm/pen/rNVmqJe
Thanks a lot!

Answer 1

In if condition there should be double (==) equal sign and also check by backgroundColor instead of background because of some browsers has more properties with background like background: green none repeat scroll 0% 0%; so condition will not execute.
I recommend use backgroundColor instead of background.
var btn = document.getElementById("button");
var test = document.getElementById("test");
btn.onclick = function() {
if (test.style.backgroundColor == "red") {
test.style.backgroundColor = "green";}
else {
test.style.backgroundColor = "red";
}
}
.test {
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
}
<button id="button">Toggle</button>
<div class="test" id="test"></div>