Match or synchronize two arrays to make a spelling game in JavaScript-CodePudding

I'm new to coding and I'm currently learning to make a spelling game with Javascript. I'm trying to make one just like Coding With Kenny's on Youtube. Here's his code with a few of my edits:

<body>
    <h1 id="heading">Spelling App</h1>
    <div id="container">
      <input id="input">
        <div id="buttons">
          <button id="checkButton">Check</button>
          <button id="getWordButton">get word</button>
          <button id="resetButton">next word</button>
        </div>
        <p id="correct"></p>
        <p id="incorrect"></p>
    </div>
    <script>
      var words = ["easy","apple","idea","key","awesome",
                  "spelling","eligible","cat","dog","firefly"];
      var randomWord = words[Math.floor(Math.random()*words.length)];
      var guessbtn = document.getElementById("checkButton");
      var getwordbtn = document.getElementById("getWordButton");
      var resetbtn = document.getElementById("resetButton");

      var correct = document.getElementById("correct");
      var incorrect = document.getElementById("incorrect");

      resetbtn.addEventListener("click", function() {
        location.reload();
      })

      var speech = new SpeechSynthesisUtterance();

      guessbtn.addEventListener("click", function() {
        var input = document.getElementById("input").value;

        if(input==randomWord) {
          correct.innerHTML = "correct!"
        }
        else if (input!==randomWord) {
          incorrect.innerHTML = "incorrect!"
        }
      })

      getwordbtn.addEventListener("click", function() {
        var input = document.getElementById("input").value;
        speech.text = randomWord;
        speechSynthesis.speak(speech);
      })
    </script>
  </body>

The thing is I want to use external audio files instead of speech.text for the getWordButton. I tried to make 2 arrays: 1 for the audio files and another for the answers, but it didn't work since they couldn't synchronize when picked randomly. Here's the array I tried to add:

var Sounds= ["easy.mp3","apple.mp3","idea.mp3","key.mp3","awesome.mp3",
                  "spelling.mp3","eligible.mp3","cat.mp3","dog.mp3","firefly.mp3"];
oldSounds = [];
var index = Math.floor(Math.random() * (sounds.length)),
    thisSound = sounds[index];

I want the audio to play when the "get word" button is clicked (the word to be spelled), and the other array:

var words = ["easy","apple","idea","key","awesome",
                  "spelling","eligible","cat","dog","firefly"];
      var randomWord = words[Math.floor(Math.random()*words.length)];

to be the answer key.

Any suggestions?

CodePudding user response：

Because you're randomly choose from each of the two arrays. There is a random non-zero chance that you'll get the same index in both arrays, but the odds are pretty low.

If you can guarantee that the arrays are always the same length and in the same order, just choose one random value and use it in both arrays:

var index = Math.floor(Math.random() * sounds.length);
var randomWord = words[index];
var randomSound = sounds[index];

The ideal next step would be to not have two arrays at all, but one array of objects. For example:

var words = [
  { word: 'easy', sound: 'easy.mp3' },
  { word: 'apple', sound: 'apple.mp3' },
  // etc.
];

Then randomly pick an object from that array:

var randomWord = words[Math.floor(Math.random() * words.length)];

And you can use the .word and .sound properties from that object. For example, when comparing the user input:

if (input == randomWord.word)

So instead of manually maintaining multiple arrays of values (which need to be the same length, in the same order, etc.) you can just have one array of objects in which the related values are kept together.