The parameter I'm passing through a async function is undefined in the function-CodePudding

I have an async function that on page load it runs a function that gets a JSON file and stores it in songResults. it then gets a random object from the JSON and takes some parameters from it and uses them to set the sources for some elements in my HTML file. I am having an issue with the callback for the event listener, the parameter I am passing through guessingGame() is undefined inside the guessingGame() function and I'm not sure why. any help would be muchly appreciated.

JS code

    //A async function to run when the page loads to get the first song and album cover to display.
const onPageLoad = async () => {
  let songResults = await getSongData();
  let randomSong = songResults[Math.floor(Math.random() * songResults.length)];
  audioSound.src = randomSong.song_path;
  audioSound.load();
  albumCover.src = randomSong.photo_path;
  //An event listener for the submit button to run the guessing game function.
  submitButton.addEventListener("click", guessingGame(randomSong.song_path))
};

//async function for when the button is clicked to check the answer in the input box to the json data.
const guessingGame = async (songPath) => {
  //get the value of the input box
  let input = document.getElementById("guessInputBox").value;
  //check if the value of the input box matches the song path in the json data
  if (input) {
    if (input === songPath) {
        alert('correct')
        score  ;
        alert("that took "   score   " attempts");
        score = 0;
        changeSong();
    } else {
        alert('incorrect')
        alert(songPath);
        score  ;
    };
  };
};

What a json file response looks like

{
"song_name": "Listen to Us",
"release_date": "1/05/2012",
"album": "Home Brew",
"photo_path": "/pictures/home-brew.jpg",
"song_path": "/songs/homebrewski-listenToUs.mp3"

}

CodePudding user response：

The addEventListener method expects a function as the second argument. Look closely at your code:

submitButton.addEventListener("click", guessingGame(randomSong.song_path))

Note that you're executing guessingGame, rather than referencing it. Instead, you'd want to provide another function:

submitButton.addEventListener("click", function () {
    guessingGame( randomSong.song_path );
});

Now, when the submitButton is clicked, our anonymous function will be called, which in turn will pass randomSong.song_path to guessingGame.

CodePudding user response：

so the new code updates it kind of it works the first time you guess but the second time you guess it says your incorrect then correct and keeps looping heaps really weird and lags out the browser.

const onPageLoad = async () => {
  let songResults = await getSongData();
  let randomSong = songResults[Math.floor(Math.random() * songResults.length)];
  audioSound.src = randomSong.song_path;
  audioSound.load();
  albumCover.src = randomSong.photo_path;
  //An event listener for the submit button to run the guessing game function.
  submitButton.addEventListener("click", () => {
    guessingGame(randomSong.song_name);
});
};

//async function for when the button is clicked to check the answer in the input box to the json data.
const guessingGame = async (songPath) => {
  //get the value of the input box
  let input = document.getElementById("guessInputBox").value;
  //check if the value of the input box matches the song path in the json data
  if (input) {
    if (input.toLowerCase() === songPath.toLowerCase()) {
        alert('correct')
        score  ;
        alert("that took "   score   " attempts");
        score = 0;
        changeSong();
    } else {
        alert('incorrect')
        alert(songPath);
        score  ;
    };
  };
};

//need to  change this to an async function once figured out how to store data.
const changeSong = async () => {
  let songResults = await getSongData();
  let randomSong = songResults[Math.floor(Math.random() * songResults.length)];
  audioSound.src = randomSong.song_path;
  audioSound.load();
  albumCover.src = randomSong.photo_path;
  submitButton.addEventListener("click", () => {
    guessingGame(randomSong.song_name);
  });
};