如何在JavaScript中创建一系列可以单击以执行同一功能的不同版本的按钮？

Question

我正在Django上创建一个网站，向学生提供拼写测试，然后他们填写该分数，然后得到10分。不允许学生看到这些单词，因此我使用功能'给了他们一系列声音字节说“ speak（）”，只有当我按下按钮时，它们都说相同的话，因为我不知道如何将单个数据解析到函数中，以告诉它“说”哪个拼写。我知道它不起作用的原因是因为我正在将“ sBite.id”解析为speak（）函数，而sBite.id始终是相同的值。我只是不知道我应该解析什么值才能将正确的拼写发送给函数以下是相关的JS代码：function speak(word){  var msg = new SpeechSynthesisUtterance(usedWords[word]);  window.speechSynthesis.speak(msg);}usedWords=[];  function load(played, mistake, score){  alert(mistake)  var x =["ball","racket","apple","cheese","find","any","new",          "display","please","happy","plead","pleat","aple","bple","cple"];  var step;  var spellList = document.getElementById("spellList");  if(listlen < 10){    for(step = 0;step < 10;step++){      li = document.createElement("li");      sBite = document.createElement("button");      rand = x[Math.floor(Math.random() * x.length)];      if(usedWords.includes(rand)){        step = step - 1;        continue;      }      else{        usedWords.push(rand);        li.appendChild(document.createTextNode(rand));        li.id = "spelling";        spellList.appendChild(li);        var testy = usedWords[step];        sBite.setAttribute("onClick","speak(sbite.id)");        sBite.type="button";        sBite.id=step;        sBite.textContent=sBite.id;        spellList.appendChild(sBite);        listlen++;      }