输入字段值显示为未定义

Question

我有一个可以在时间表上测试人员的应用程序。总和会显示给用户，然后他们必须在输入字段中输入答案。

大多数操作有效，但是输入字段的值显示为undefined，而不是用户输入的值。

let timesTableNumber = 2;
let listOfTables = [2,3,4,5,6,7,8,9,10,11,12];
let spellingItems = listOfTables.length;
let spellingItemShown = 0;
let checks = 0;
let answers = {
    rightAnswers: 0,
    wrongAnswers: [],
    numberOfSpellings:spellingItems,
    spellingGroup: "{{spelling.group}}",
    spellingId: "{{spelling._id}}",
    spellingcreatedBy: "{{spelling.createdBy}}",
    user: "{{user._id}}"
};

var checkSpellings = setInterval(function() {
    if (spellingItemShown > checks) {
      checkAnswer();
    }
    
    if (spellingItemShown < spellingItems){
        
        document.getElementById('spellings').innerHTML = timesTableNumber + 'x' + listOfTables[spellingItemShown]; 
        document.getElementById('answer').innerHTML = timesTableNumber * listOfTables[spellingItemShown]; 

        //hide the spelling to be tested for x seconds
        var hideSpellings = setInterval(function() {
            document.getElementById('spellings').style.visibility  = 'hidden';
            document.getElementById('form').style.removeProperty( 'visibility' );  
            document.getElementById('spelling').focus();  
            clearInterval(hideSpellings);            
        }, 3000);
        
        document.getElementById('spellings').style.removeProperty( 'visibility' );
        document.getElementById('form').style.visibility = 'hidden';
                

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

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

        console.log(answers);
        clearInterval(checkSpellings);
    }
}, 7000);

function checkAnswer(){
  console.log('checkAnswer:');
var correctAns =  timesTableNumber * listOfTables[spellingItemShown];
var userAns = document.getElementById('spelling').value;

  console.log('correctAns', correctAns);
  console.log('userAns', userAns);
  // debugger;
  if (userAns == correctAns){
    console.log('FOOOOOO');
    answers.rightAnswers ++;
  } else {

    console.log('yo');
    answers.wrongAnswers.push(document.getElementById('spellings').innerHTML);

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

 <div class="row">
    <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3">

<div id="spellingTest">
    <h2 id="spellings"></h2>
    <p id="answer" class="answer" style="visibility:hidden"></p>
<div id="form" class="spellings" style="visibility:hidden">
    <label for="spelling"> attempt</label>
    <input type="number" class="form-control" id="spelling" name="spelling"> 
</div>


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

任何人都可以帮助我了解为什么会这样以及如何解决吗？

编辑-通过将undefined的值更改为userAns，我解决了var userAns = document.getElementById('spelling').value;问题。但是现在存在一个问题，正确答案总是比实际正确答案领先一个例如2x2的正确答案显示为6而不是4，而3x2的正确答案显示为8而不是6