用于显示来自过滤器的随机数组值的按钮

Question

I am trying to have a button that randomly displays an item of an array based on a filter using a button to cycle through the array.

My current HTML is:

<input type="button" id="btnSearch" value="Search" onclick="GetValue();" />
<br>
<img id="target" src="/img/test.png">
<p id="message">test</p>

and my JS is:

function GetValue() {
  var quotes = [
    {
      name: 'Roller Coaster',
      artic: ['initialR', 'medialR', 'finalR'],
      img: '/img/rollercoaster.png'
    },
    {
      name: 'Rooster',
      artic: ['initialR', 'finalR'],
      img: '/img/rooster.png'
    },
    {
      name: 'Rose',
      artic: ['initialR'],
      img: '/img/rose.png'
    }
  ];
  var filteredQuotes = quotes.filter(x => x.artic.includes('medialR'));
  var random = filteredQuotes[Math.floor(Math.random() * filteredQuotes.length)];

  document.getElementById('message').innerHTML = random.name;
  document.getElementById('target').innerHTML = random.img;
}

The filter I have on this would only display "Roller Coaster" based on the filter, but currently nothing changes on click.

Answer 1

I figured it out!

const btn = document.querySelector('#btnSearch');

function GetValue() {
  var quotes = [
    {
      name: 'Roller Coaster',
      artic: ['initialR', 'medialR', 'finalR'],
      img: '/img/rollercoaster.png'
    },
    {
      name: 'Rooster',
      artic: ['initialR', 'finalR'],
      img: '/img/rooster.png'
    },
    {
      name: 'Rose',
      artic: ['initialR', 'finalZ', 'CVC', 'syl1'],
      img: '/img/rose.png'
    }
  ];
  const filteredQuotes = quotes.filter(x => x.artic.includes('medialR'));

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

  document.getElementById('message').innerHTML = random.name;
  document.getElementById('target').innerHTML = random.img;
}

btn.addEventListener('click', () => {
  GetValue();
});