Retrieving XML data using AJAX and Javascript then showing it on a HTML page

The first bit of the code shows but the XML will not display on the html page. I'm not sure if I have missed anything. Any help is appreciated. The HTML at the bottom is a separate page to the JavaScript above it. Been stuck on it for ages feel like i've missed something out. I am not allowed to use JQUERY only Javascript.

  window.addEventListener('load', function () {
 "use strict";
const URL_GETOFFERS = 'getOffers.php';
const URL_GETOFFERS_XML = 'getOffers.php?useXML';

function textTimer() {
fetch(URL_GETOFFERS)
    .then(
        function (response) {
            return response.text();
        })
    .then(
        function (data) {
            console.log(data);
            document.getElementById("getHTMLOffer").innerHTML = "<p>" + data + "</p>";
        })
    .catch(
        function (err) {
            console.log("Something went wrong!", err);
        });
}
setInterval(function(){
textTimer()
}, 5000);
textTimer();

function offerXML(xml) {
    fetch(URL_GETOFFERS_XML)
        .then(
            function (response) {
                return response.text();
            })
        .then(
            function (data) {
                let xmlDoc = xml.responseXML;
                console.log(xmlDoc);
                xmlDoc.getElementById("getXMLOffer").innerHTML = "<p>" + data + "</p>";
            })
        .catch(
            function (err) {
                console.log("Something went wrong!", err);
            });
}
offerXML();
});


<main>
<aside id="offers">
<div id="getHTMLOffer">.</div>
</aside>
<aside id="XMLoffers">
<div id="getXMLOffer">.</div>
</aside>

</main>
<script type="text/javascript" src="getOffers.js"></script>