AJAX动态按钮

Question

Does anyone have suggestions on how to complete the following assignment? I've listed the instructions from the teacher below along with my JavaScript code. Thanks in advance!

Instructions: The primary task is to dynamically generate the "genre" buttons that are currently hardcoded into the correlating HTML file. The genre buttons should work the same way the hardcoded buttons currently work meaning they should have an event listener attached to them that should display podcasts from the ajax response that match the genre that was clicked.

JavaScript Code:

        /**
 * Ajax GET requester
 * 
 */
function get(url){
    // Return a new promise.
    return new Promise(function (resolve, reject){
        // Do the usual XHR stuff
        var req = new XMLHttpRequest();
        req.open('GET', 'js/data.json');

        req.onload = function(){
            // This is called even on 404 etc
            // so check the status
            if(req.status === 200){
                // Resolve the promise with the response text
                resolve(req.response);
            }else{
                // Otherwise reject with the status text
                // which will hopefully be a meaningful error
                reject(Error(req.statusText));
            }
        };
        // Make the request
        req.send();
    });
 }

    function get_podcasts(genre){
        var url = 'js/data.json';
        get(url).then(function (response){
            var body = document.getElementById('mainContent');
            response = JSON.parse(response);
            if(response.results.length > 0){
                body.innerHTML = '';
                for(var i = 0; i < response.results.length; i++ ){
                    if(response.results[i].primaryGenreName === genre ){
                        var image = '<img src="' + response.results[i].artworkUrl100 + '">';
                            var image = document.createElement('img');
                            image.src = response.results[i].artworkUrl100;
                            body.appendChild(image);
                            body.innerHTML += '<div>' + response.results[i].trackName + '</div>' ;
                    }
                }            
            }else{
                body.innerHTML = 'No results found.';
            }
            console.log(response);
        }, function (error){
            console.log('No hits Found');
        });
    }

    window.onload = function(){
        //create an array with all button names
        var genreNames = ['TV & Film', 'News & Politics', 'Society & Culture', 'Music', 'Hobbies']; 
        //loop through the array


        for(var i = 0; i < genreNames.length; i++){
           //create button element called "TV and Film" or whatever
           var dynamicButtons = document.createElement('BUTTON');
           var buttonText = document.createTextNode(genreNames);
           //add it to the DOM (document)
           dynamicButtons.appendChild(buttonText);
           document.body.appendChild(dynamicButtons);
        }
    /*
        for(i =0; i <= response.results.length; i++) {
            for (key in response.results[i].primaryGenreName) {
                if(response.results[i].primaryGenreName.hasOwnProperty(key)) {
                    output += '<li><button type="button">' + response.results[i].primaryGenreName + '</button></li>';
                    var update = document.getElementById('genres');
                    update.innerHTML = output;
                }
            }
        }
    */
    };