Блог

Я пытаюсь создать кнопку «Показать — Актер — Шоу», которая отображает случайное шоу, затем участника из этого шоу, затем другое шоу с тем же участником.

Мне удалось сгенерировать случайный идентификатор показа, но я не могу понять, как передать этот идентификатор в функцию randomActor, поскольку randomShow не является функцией.

В идеале я хочу использовать одну кнопку для поиска актера или шоу в зависимости от предыдущего поиска. В настоящее время проблема связана с моей функцией randomActor. Я изо всех сил пытаюсь передать значение поиска randomShow в строковый литерал шаблона.

Любая помощь / совет приветствуется!

 const randomButton = document.querySelector('#randomShow')
const randomShow = randomButton.addEventListener('click', async function (e) {
    e.preventDefault();
    const randomNumber = Math.floor(Math.random() * 1000);
    const res = await axios.get(`http://api.tvmaze.com/shows/${randomNumber}`)
    console.log(res.data.id);
    return (res.data.id)
})



const randomActor = randomActorButton.addEventListener('click', async function (e) {
    e.preventDefault();
    const res = await axios.get(`http://api.tvmaze.com/shows/${randomShow.res.data.id}/cast`)
    console.log(res.data[0]);
    return (res.data[0])

})
 

EventListener не вернет результат функции в прослушивателе

Это работает:

 const randomButton = document.querySelector('#randomShow');
let randomShow = "";
randomButton.addEventListener('click', async function(e) {
  e.preventDefault();
  document.getElementById("actor").innerHTML = "";
  const randomNumber = Math.floor(Math.random() * 1000);
  const res = await axios.get(`https://api.tvmaze.com/shows/${randomNumber}`)
  document.getElementById("show").innerHTML = res.data.name;
  randomShow = res;
})


const randomActorButton = document.querySelector('#randomActor')
randomActorButton.addEventListener('click', async function(e) {
  e.preventDefault();
  if (randomShow) {
    const res = await axios.get(`https://api.tvmaze.com/shows/${randomShow.data.id}/cast`)
    console.log(res.data)
    document.getElementById("actor").innerHTML = res.data[Math.floor(Math.random(res.data.length))].person.name;
  }
  else console.log("No show")
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.min.js" ></script>

<button type="button" id="randomShow">Random show</button>
<button type="button" id="randomActor">Random Actor</button>

<span id="show"></span> <span id="actor"></span>