Opera Mini and XMLHTTpRequest()

Question

This relates to my previous question.

I have created the following script, which takes information from an API and displays it on a web page using template literals. Everything works fine, expect in Opera Mini, where the data from the API does not load.

<script language="JavaScript">

  window.onload = function(){
//// UI templates

    var app = document.getElementById('root')


    var container = document.createElement('div')
    container.setAttribute('class', 'container')
    app.appendChild(container)

    cardHeight = window.innerHeight  

  const API = 'https://api.the-odds-api.com/v3/odds/?sport=soccer_epl&region=uk&apiKey=KEY'

  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        let data = JSON.parse(xhr.responseText)
        console.log(data, 'data')

        data.data.forEach((match, index) => {
          console.log(match, 'match')
          const card = document.createElement('div')
          card.setAttribute('class', 'card')
          
          const odds = match.sites[0].odds

          // styles

          const cssClasses = {
            team: 'flex flex-row',
            radio: 'mla',
            title: 'f4'
          }

          const markup = `
            <div class='mb3 flex flex-column bg-near-white' style="height: ${cardHeight}px">
              <div class="${cssClasses.team}">
                  <h2 class="${cssClasses.title}">${match.teams[0]}</h2>
                  <span class="${cssClasses.radio}">${odds.h2h[0]}<input type="radio" name="${index}" value="1"></span>
              </div>
              <div class="${cssClasses.team}">
                  <h2 class="${cssClasses.title}">Draw</h2>
                  <span class="${cssClasses.radio}">${odds.h2h[1]}<input type="radio" name="${index}" value="1"></span>
              </div>
              <div class="${cssClasses.team}">
                  <h2 class="${cssClasses.title}">${match.teams[1]}</h2>
                  <span class="${cssClasses.radio}">${odds.h2h[2]}<input type="radio" name="${index}" value="1"></span>
              </div>
            </div>
          `;
            
          card.innerHTML = markup
          console.log(card, 'card')

          container.appendChild(card)
        })  
      } 
      if (xhr.status == 404) {
        console.log("not working")
      } 
    }
  }

  xhr.open('get', API, true);
  xhr.send();
}
  </script>

Is there something I am doing wrong?

I am using the odds API