AJAX动态按钮

有人对如何完成以下作业有什么建议吗？我在下面列出了老师的说明以及我的JavaScript代码。提前谢谢

说明： 主要任务是动态生成当前硬编码到相关HTML文件中的“流派”按钮。 类型按钮的工作方式应该与硬编码按钮当前的工作方式相同，这意味着它们应该附加一个事件侦听器，该侦听器应该显示来自ajax响应的播客，这些播客与单击的类型相匹配

JavaScript代码：

        /**
 * 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;
                }
            }
        }
    */
    };

/**
*Ajax获取请求程序
* 
*/
函数get（url）{
//回报一个新的承诺。
返回新承诺（功能（解决、拒绝）{
//做通常的XHR工作
var req=新的XMLHttpRequest（）；
请求打开（'GET'，'js/data.json'）；
req.onload=函数（）{
//这甚至在404上也被称为
//所以检查一下状态
如果（请求状态===200）{
//用响应文本解析承诺
解决（请求响应）；
}否则{
//否则，拒绝状态文本
//这将有望成为一个有意义的错误
拒绝（错误（请求状态文本））；
}
};
//提出请求
请求发送（）；
});
}
函数获取播客（类型）{
var url='js/data.json'；
获取（url）。然后（函数（响应）{
var body=document.getElementById（'mainContent'）；
response=JSON.parse（response）；
如果（response.results.length>0）{
body.innerHTML=''；
对于（var i=0；i