如何在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++;

      }