Question

是否有人就如何完成以下作业提出建议？我已经列出了以下老师的说明以及我的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动态按钮

0 个答案: