Question

I have the code below (I know this is only one function out of a bunch of code but hopefully it is enough). The console is giving the error “Cannot read property ‘value’ of undefined” for the var userAnswer = currentBlank.value;. The applicable DOM (I think the DOM will be more useful than the html source) is directly below (in a picture) and the javascript function I am having the problem with is right below that. I can’t seem to figure out what is wrong. Thought maybe new eyes might be able to.

var allBlanksLoc = document.getElementById('text');

allBlanksLoc.style.display = 'block';

var allBlanks = allBlanksLoc.getElementsByTagName('input');

var sortedblanks = blanks.sort(function(a, b){
    return a - b
});
var wrongBlanks = 0; // logs how many blanks were answered wrongly over all
var rightBlanks = 0; // logs how many blanks were answered rightly over all

var testAnswersArea = document.getElementById('testAnswers');

finalAnswers = "";
var blankNum = 0;

for (var i = 0; i < wordlist.length; i++) {
    if (indicesOfBlanks[i]) {
        var currentBlank = allBlanks[blankNum];
        var wordNum = sortedblanks[blankNum];
        var blankWord = wordlist[wordNum];
        var blankWordUp = wordlistUpper[wordNum];
        var usrAnswer = currentBlank.value;
        if (usrAnswer != blankWord && usrAnswer != blankWordUp) {
            finalAnswers += "<del style=\"font: red;\">" + currentBlank.value + "</del> <span style=\"font: green;\">" + blankWordUp + "</span> ";
        } else {
            finalAnswers += "<span style=\"font: green;\">" + currentBlank.value + "<span>";
        }
        blankNum++;
    }
    else {
        finalAnswers += wordlistUpper[i] + " ";
    }
}

testAnswersArea.innerHTML = finalAnswers;

Answer 1

wordList has more elements than allBlanks.
Therefore, allBlanks[blankNum] is undefined.