Javascript 在使用模板文本创建HTML时，如何使用参数设置onclick listener？

我正在做一个代码测试，并使用map函数遍历一组对象，每个对象都包含一个标题、选项和每个问题的答案。我使用了一个模板文本，使代码易于阅读。创建按钮时，map函数中的键具有正确的值，但是，单击按钮时，它始终返回0

function printIt(input){
console.log(input);
}

var question = `
    <div class='title'>
        <h1>${questions[cur].title}</h1>
        <p>${questions[cur].choices.map((item, i) => `
            <button class='answers' id='${i}' onclick='${printIt(i)}'>${item}</button><br />
        `).join('')}</p>
    </div>
`;

//put on page
$("#container").append(question);

函数打印（输入）{
控制台日志（输入）；
}
变量问题=`
${问题[cur].title}
${questions[cur].choices.map（（项目，i）=>`
${item}

`).join（“”）}

`;
//登上
$（“#容器”）。附加（问题）；
而您可以通过确保
onclick
属性字符串包含函数来修复它，例如

内联处理程序被广泛认为是非常糟糕的实践，因为它们有许多范围问题和字符串转义问题。最好使用Javascript添加侦听器。在
#容器上使用事件委派
-单击其中的按钮时，检查按钮的
id
，并使用该
id
调用
printIt
：

var question = `
    <div class='title'>
        <h1>${questions[cur].title}</h1>
        <p>${questions[cur].choices.map((item, i) => `
            <button class='answers' id=${i}>${item}</button><br />
        `).join('')}</p>
    </div>
`;

//put on page
$("#container").append(question);
$("#container").on('click', 'button.answers', function() {
  printIt(this.id);
});

地图功能中的键是哪个键？这是指变量名吗？这是做什么的
onclick='${i}'
@NidhinJoseph刚刚更新了它。我忘了带控制台。log@CertainPerformance我可能用错了词。我指的是迭代器“I'@CertainPerformance”，它不是在我发布的代码之外使用的。它是在map函数（item，I）的本地范围内声明的，应该在单击按钮时记录在控制台中。
var question = `
    <div class='title'>
        <h1>${questions[cur].title}</h1>
        <p>${questions[cur].choices.map((item, i) => `
            <button class='answers' id=${i}>${item}</button><br />
        `).join('')}</p>
    </div>
`;

//put on page
$("#container").append(question);
$("#container").on('click', 'button.answers', function() {
  printIt(this.id);
});

var question = `
    <div class='title'>
        <h1>${questions[cur].title}</h1>
        <p>${questions[cur].choices.map((item) => `
            <button class='answers'>${item}</button><br />
        `).join('')}</p>
    </div>
`;

//put on page
$("#container").append(question);
$("#container").on('click', 'button.answers', function() {
  const index = [...this.parentElement.children].indexOf(this);
  printIt(index);
});