为什么当条件来自api时图标不显示。当我将天气api记录到控制台时，我清楚地检查它是否工作正常。即使我尝试硬编码一个图标，它仍然会显示出来，但当我使用完全动态的东西时，图标不会显示出来。我怎么了。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

const tempStatus={%tempStatus%}
let weathercon=document.getElemenetById("weathercon");
if (tempStatus == "Sunny") {
        weathercon.innerHTML =
          "<i class='fas  fa-sun' style='color: #eccc68; font-size:8vw;' ></i>";
      } else if (tempStatus == "Clouds") {
        weathercon.innerHTML =
          "<i class='fas  fa-cloud' style='color: #f1f2f6; font-size:8vw;'></i>";
      } else if (tempStatus == "Rainy") {
        weathercon.innerHTML =
          "<i class='fas  fa-cloud-rain' style='color: #a4b0be; font-size:8vw;' ></i>";
      } else if(tempStatus == "Haze"){
        weathercon.innerHTML ="<i class='fas fa-smog' style='font-size:8vw;'></i>"
      }

`

<div class="weathercon">

            </div>

`