Как создать серию кнопок в 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++;
      }

Answer 1

У меня все получилось!Используя this.id, я могу назвать идентификатор каждой кнопки в списке, все они соответствуют той кнопке с номером.Это означает, что я могу отправить это в функцию 'speak ()' вместе со списком слов в тесте правописания и вернуть правильный звуковой фрагмент.

function speak(words, id){
  var msg = new SpeechSynthesisUtterance(words[id]);
  window.speechSynthesis.speak(msg);
}


function load(played, mistake, score){
  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 < 9;step++){
      li = document.createElement("li");
      li.id = "spelling";
      li.style.display = "none";
      sBite = document.createElement("button");
      sBite.type="button";
      sBite.id=step;
      sBite.setAttribute("onClick","speak(usedWords, this.id)");
      sBite.className = "spellButtons";
      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));
        spellList.appendChild(li)
        sBite.textContent="Word " + (step + 1);
        spellList.appendChild(sBite);
        listlen++;
      }
    }
  }
}

Answer 2

Вы должны использовать addEventListener, чтобы присоединить обратный вызов click и обернуть свой вызов функции в функцию, чтобы он оценивался только при нажатии кнопки, а не при регистрации обратного вызова.

Заменить эту строку:

sBite.setAttribute("onClick","speak(sbite.id)");

этим:

sBite.addEventListener("click", () => speak(sbite.id));