Значение поля ввода отображается как неопределенное

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.info('there were '+ answers.rightAnswers + ' right answers and the wrong answers were '+ answers.wrongAnswers);

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

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

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

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

    console.info('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>