检查框是否为空有问题

Question

好的，所以我试图在verify函数（）中创建一个if语句来检查何时一个盒子是空的，它应该打印出一条消息说要填满所有盒子。验证功能会将Box ID与图像数据ans进行比较，如果它们相同，则是正确的。如果您觉得自己不懂，请询问有关我的代码的更多详细信息。

   function verify() {
          var i = 0;
          i++;
          var correct = true;
          var empty= false;
    
          var box1 = document.getElementById('box1').childNodes;
          if (box1[0] != null && box1[0].dataset.ans != 'box1') {
            correct = false;
            document.getElementById("pool").appendChild(box1[0]);
          }else if(box1[0] = null){
            empty= true;
          }else if(box1[0].dataset.ans == 'box1'){
            score.innerHTML = i++;
          }
    
          var box2 = document.getElementById('box2').childNodes;
          if (box2[0] != null && box2[0].dataset.ans != 'box2') {
            correct = false;
            document.getElementById("pool").appendChild(box2[0]);
          }else if(box2[0] = null){
            empty= true;
          }else if(box2[0].dataset.ans == 'box2'){
            score.innerHTML = i++;
          }
    
          var box3 = document.getElementById('box3').childNodes;
          if (box3[0] != null && box3[0].dataset.ans != 'box3') {
            correct = false;
            document.getElementById("pool").appendChild(box3[0]);
          }else if(box2[0] = null){
            empty = true;
          }else if(box3[0].dataset.ans == 'box3'){
            score.innerHTML = i++;
          }
    
          if(empty= true){
            message.innerHTML = "Please fill all boxes"
          }
    
          if(correct){
            message.innerHTML = "All Correct. Well Done!";
          }else if(!correct){
            message.innerHTML = ("Incorrect. Please Try Again.");
            attempt.innerHTML = i++;
          }
    
    
    
        }

  <!-- Images displayed on the screen made draggable -->
    <div style="display:box" ondrop="drop(event)" ondragover="allowDrop(event)" id="pool">
      <img id="target001" data-ans="box1" src="/FYP/Images/Number1.jpg" draggable="true" ondragstart="drag(event)" width="250" height="166.5">
      <img id="target002" data-ans="box2" src="/FYP/Images/Number4.jpg" draggable="true" ondragstart="drag(event)" width="250" height="166.5">
      <img id="target003" data-ans="box3" src="/FYP/Images/Number9.jpg" draggable="true" ondragstart="drag(event)" width="250" height="166.5">
    </div>
    
      <p> place the numbers in chronological order </p>
    
      <!-- Boxes are created for the corresponding images to be placed -->
      <div id="box1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <div id="box2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <div id="box3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    
      <div>
        <button onClick="verify()"> submit </button>
        <h2 id="message"></h2>
      </div>