这里我不明白为什么 if 语句不起作用？

Question

const sq = document.querySelectorAll(".square");

var food = document.createElement("div");

food.setAttribute("类", "食物") const snake = document.querySelector(".snake");

const btns = document.querySelectorAll(".btns > button");

var x = 0;

var y = 0;

var index = Math.floor(Math.random() * 23)

sq[索引].appendChild(食物) btns.forEach((btn)=> {

btn.addEventListener("click", (e)=>{

    x += 100;

  

    if(e.target.innerHTML.trim() === "right"){

      

     

        snake.style.left = x;
       
       

        if(x == 500){

            x = -100;
        }





       

      
  
    }


    if(snake.getBoundingClientRect().left == food.getBoundingClientRect().left){

        food.style.display = "none";


        sq[index].appendChild(food)

}

})

})

我不想显示任何食物元素，但是在我把蛇带到食物上并将其重叠后，食物不会隐藏，为什么 if 语句不起作用，有人可以向我解释吗，我正在尝试学习 Javascript，这种编程语言只是我的作为前端开发人员开始工作的问题请帮助我......