Why does my function not recognize the style of an element correctly? [duplicate]

I have three divs. Only the first one is visible when the page loads.After clicking on a button, the second div becomes visible. After clicking on it again, the third div should also become visible, but it doesn't and I do not understand why.

I am changing the display of the divs via a js "if statement" that checks if a div is already visible, or not.

Am I doing something wrong?

function displayMore() {
  if (document.getElementById("div_02").style.display == "none") {
    document.getElementById("div_02").style.display = "block";
  } else if (document.getElementById("div_03").style.display == "none") {
    document.getElementById("div_03").style.display = "block";
  }
}

#div_01 {
  width: 100%;
  height: 50px;
  background: purple;
}

#div_02 {
  display: none;
  width: 100%;
  height: 50px;
  background: violet;
}

#div_03 {
  display: none;
  width: 100%;
  height: 50px;
  background: pink;
}

<div id="div_01"></div>
<div id="div_02"></div>
<div id="div_03"></div>
<input type="button" onclick="displayMore();" value="Display More">