在setInterval函数

Question

我有一个页面，该页面显示一个单词（用户定义的秒数），然后显示一个输入字段（用户定义的秒数），用户可以在该输入字段中拼写该单词。然后，应用程序将记录正确和错误的答案。

当前，只要用户在输入框中输入内容并通过单击按钮或单击Enter触发checkAnswer()功能，此方法就可以正常工作。如果未通过这种方式触发checkAnswer()，则不会记录错误的答案（即，未经尝试的拼写）。

到目前为止，这是我的代码：

let spellingWords = ['first', 'second', 'third', 'fourth', 'fifth']; 
let spellingItems = spellingWords.length;
let showTime = 3000;
let answerTime = 3000;
let spellingItemShown = 0;
let answers = {
    rightAnswers: 0,
    wrongAnswers: [],
    numberOfSpellings:spellingItems
};


var checkSpellings = setInterval(function() {  
    
    if (spellingItemShown < spellingItems){
        
        document.getElementById('spellings').innerHTML = spellingWords[spellingItemShown]; 
        //hide the spelling to be tested for 4 seconds
        var hideSpellings = setInterval(function() {
            document.getElementById('spellings').style.visibility  = 'hidden';
            document.getElementById('form').style.removeProperty( 'visibility' );  
            document.getElementById('spelling').focus();  
            clearInterval(hideSpellings);            
        }, showTime);
        
        document.getElementById('spellings').style.removeProperty( 'visibility' );
        document.getElementById('form').style.visibility = 'hidden';
                

    spellingItemShown ++;
    
    } else{
        //We're done!
        console.log('there were '+ answers.rightAnswers + 'and the wrong answers were '+ answers.wrongAnswers);

        //post to server desired info....
    axios.post('/spellings', answers);
    showResults();

        console.log(answers);
        clearInterval(checkSpellings);
    }
}, showTime+answerTime);

function checkAnswer(){
  if (document.getElementById('spellings').innerHTML == document.getElementById('spelling').value){
    console.log('FOOOOOO');
    answers.rightAnswers ++;
  } else {
        /* attempt to get empty input value to be pushed to wrong answer array 
        if(document.getElementById('spelling').value == ""){
            console.log(document.getElementById('spellings').innerHTML);
            answers.wrongAnswers.push(document.getElementById('spellings').innerHTML);
        } */
    answers.wrongAnswers.push(document.getElementById('spellings').innerHTML);

  }
  document.getElementById("spelling").value = "";
}

//dispay the results to the user
 function showResults () { 
  // create a new div element 
  var newDiv = document.createElement("div"); 
  newDiv.className = "col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3";

  // and give it some content 
  var newContent = document.createTextNode('there were '+ answers.rightAnswers + ' right answers.  The wrong answers were '+ answers.wrongAnswers); 
  // add the text node to the newly created div
  newDiv.appendChild(newContent);  

  // add the newly created element and its content into the DOM 
  var currentDiv = document.getElementById("spellingResults"); 
  document.body.appendChild(newDiv); 
}

<div id="spellingTest">
    <h2 id="spellings"></h2>
<div id="form" class="spellings" style="visibility:hidden">
    <label for="spelling">spelling attempt</label>
    <input type="text" class="form-control" id="spelling" name="spelling"  onkeydown = "if (event.keyCode == 13)
                            document.getElementById('check').click()" > 
    <button class="btn btn-primary" id = "check" onclick="checkAnswer()">Check Answer</button>
</div>


<h3 id="spellingResults">Your results will show below at the end of the test.</h3>
</div>

我认为第一步是要使checkAnswer()函数在document.getElementById('form').style.visibility = 'hidden';函数中的checkSpellings之后运行，但是如果我尝试在checkAnswer()中调用if (spellingItemShown < spellingItems){..}阻止所有操作，甚至不会显示console.log('FOOOOOO');。

如果我可以正确使用函数调用方面，那是我在checkAnswer()内的尝试

if(document.getElementById('spelling').value == ""){
                console.log(document.getElementById('spellings').innerHTML);
                answers.wrongAnswers.push(document.getElementById('spellings').innerHTML);
            }

获取未尝试输入的单词的正确方法推入answers.wrongAnswers数组？