我正在做一个代码测验，并使用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);
虽然您可以通过确保onclick属性字符串包含 function （例如
onclick='console.log(2)'
内联处理程序被广泛认为是相当差的做法，因为它们有很多作用域问题和字符串转义问题。最好使用Javascript添加侦听器。在#container上使用事件委托-单击其中的按钮时，请检查按钮的id，并用该printIt调用id：
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);
});
但是数字索引ID也是一种代码味道，并且在单个文档中具有重复ID是无效的HTML。除非需要它们，否则可以通过单击click来检查其父容器中被单击按钮的索引，从而完全避免i的需要：
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',function() {
const index = [...this.parentElement.children].indexOf(this);
printIt(index);
});