Javascript if statement doesn't output the value I want when the element is undefined

I can't seem to find what i'm doing wrong here. I want to have it so that if there is no value of metar.ceiling.feet (which is taken from an API) it just outputs "Clear skies" as text. I can't get it to do this though as when I try it and metar.ceiling.feet has no value, the "Clear skies" text does not show. Any help with this would be greatly appreciated. My html code is below as well in case that is neccessary.

      if (metar.ceiling) {
        document.getElementById('ceiling_block').classList.remove("d-none");
        var x = document.createElement('p');
        if (metar.ceiling.feet === "") {
              x.innerText = "Clear skies";
            } else {   
              x.innerText = metar.ceiling.feet + 'ft';
            }
            document.getElementById("ceiling_feet").append(x);
      }

        <div id="ceiling_block" class="infocard">
        <h5 class="titleslive">Lowest Cloud</h5><h5 class="infolive"><span id="ceiling_feet"></span></h5>
        </div>