EventListener函数抛出错误

Question

我是Web开发新手并尝试创建一个简单的项目。 我有以下HTML代码：

<div id="container">
    <div class="ansBox"><p class="ansBoxP"></p></div>
    <div class="ansBox"><p class="ansBoxP"></p></div>
    <div class="ansBox"><p class="ansBoxP"></p></div>
    <div class="ansBox"><p class="ansBoxP"></p></div>
    <div class="ansBox"><p class="ansBoxP"></p></div>
    <div class="ansBox"><p class="ansBoxP"></p></div>
</div>

我试图将段落中的值与答案集进行比较并显示一条消息。

var ansBoxP = document.querySelectorAll(".ansBoxP");
var ansBox = document.querySelectorAll(".ansBox");

function setSquares() {

for(var i=0; i<numSquares; i++) {
    ansBox[i].addEventListener("click", function(){
        // Get value of square picked
        var clickVal = ansBoxP[i].textContent;
        console.log("click is " + clickVal);

        if(clickVal == answers[i]) {
            alert("corrent");
        }
        else {
            alert("incorrect"); 
        }
    });
  }
}

但是我收到以下错误：

Uncaught TypeError: Cannot read property 'textContent' of undefined
at HTMLDivElement.<anonymous>

我认为问题在于我如何设置clickVal变量。我是否正确地说这是一个范围问题？