如果word是正确的，如何使多个内容可编辑的div变成绿色？

Question

我已经尝试创建一个蠕虫游戏一段时间了，但我不知道我将如何做到这一点，如果用户输入的词是正确的，框变成绿色。同样，如果用户输入的字母是正确的，但位置不对，它就会将变成黄色的。让我们说这个词是“绝对的”，如果用户猜到单词，所有的框都会变成绿色的，但是如果用户输入的只有一个字母是正确的，则它只会根据字母的位置将一个方框变成绿色或黄色。以下是我的一些代码，我将链接下面的其余代码

   let keys = document.getElementById('keyboard-totality').querySelectorAll(".key-button");
   keys.forEach(key => {
       key.addEventListener('click', e => {
           if (e.target.id == 'DEL') {
               document.getElementById('amo1').lastChild.remove();
           }
           else {
               document.getElementById('amo1').innerHTML += (e.target.value + '</div>');
           }

       })

   });

function addOnNextElement(key,target){
       console.log(key);
       if(target.nextElementSibling.innerHTML == ""){
           target.nextElementSibling.innerHTML = key;
       }
       else{
           addOnNextElement(key,target.nextElementSibling);
       }
   }


function clickFunction() {

 document.getElementsByClassName("amot")[0].style.color = "red";
 document.getElementsByClassName("amot")[0].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[1].style.color = "red";
 document.getElementsByClassName("amot")[1].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[2].style.color = "red";
 document.getElementsByClassName("amot")[2].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[3].style.color = "red";
 document.getElementsByClassName("amot")[3].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[4].style.color = "red";
 document.getElementsByClassName("amot")[4].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[5].style.color = "red";
 document.getElementsByClassName("amot")[5].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[6].style.color = "red";
 document.getElementsByClassName("amot")[6].style.backgroundColor = "black";
 document.getElementsByClassName("amot")[7].style.color = "red";
 document.getElementsByClassName("amot")[7].style.backgroundColor = "black";

}
  document.addEventListener("keydown", KeyCheck);
function KeyCheck(event)
{
 var KeyID = event.keyCode;
 switch(KeyID)
 {
  case 8:

  event.target.previousElementSibling.focus();
  event.target.lastChild.remove();

  break;

  case 13:

  clickFunction(); ani();

  break;

  case 27:

  alert("Are you sure you want to leave?")
  window.close();

  case 46:

  event.target.previousElementSibling.focus();
  event.target.lastChild.remove();

  break;

  default:
  break;

}

}

下面是我剩下的代码，包括HTML、CSS和JS：https://code.sololearn.com/WX59M6HHngc5编辑:通过c0dm1tu向sololearn项目添加了更多的代码

Answer 1

项目的一个良好开端是将代码中的单词逐行分开，逐个测试它们。

​

let answer = "word";

function checkLettersOfRow(row){
    let letters = row.getElementsByClassName("letter");
    for (let i = 0; i < letters.length; i++) {
        if(answer.includes(letters[i].textContent)){
            if(answer.indexOf(letters[i].textContent) == i ){
                letters[i].classList.add("correct-place");
            }else{
                letters[i].classList.add("wrong-place");
            }
        }
    }
}

let rows = document.getElementsByClassName("row");
checkLettersOfRow(rows[0])

.row .letter{
    display:inline-block;
}

.correct-place{
    color:white;
    background-color:green;
}
.wrong-place{
    color:white;
    background-color:orange;
}

<div class="row">
  <div class="letter">w</div>
  <div class="letter">i</div>
  <div class="letter">k</div>
  <div class="letter">i</div>
  <div class="letter">p</div>
  <div class="letter">e</div>
  <div class="letter">d</div>
  <div class="letter">i</div>
  <div class="letter">a</div>
  <div class="letter"></div>
  <div class="letter"></div>
</div>

​