title: Object does not appear in my table. I'm trying to learn how to add an Object to the DOM with an IIFE and JSON
body: <p>I don't know how to do debugging please be patient I'm a beginner and my Object does not appear on my body, I really do not know how to go on and where my problem... I think it can be that my addListItem function breaking when it tries to create a button and again when the listener is activated.</p>
  
  <p>also, my details.sprites do not recognize...</p>
  
  <p>my HTML is very simple and has only in the body, main and div and inside the div my ul class pokemon-list.</p>
  
  <pre><code>//IIFE
  var pokemonRepository = (function () {
    var pokemonList = [];
    var apiUrl = 'https://pokeapi.co/api/v2/pokemon/?limit=150'; function loadList() {
        document.write("loadList");
        return fetch(apiUrl).then(function (response) {
            return response.json();
            document.write("loadList fetch \n");
  }).then(function (json) {
            document.write("loadList then \n");
  
            json.results.forEach(function (item) {    //result /results
                var pokemon = {
                    name: item.name,
                    detailsUrl: item.url
                };
                add(pokemon);
            })
        }).catch(function (e) {
            document.write("loadDetails  catch error\n");
  
            console.error(e);
        })
    }
  
    function loadDetails(item) {
        document.write("loadDetails \n");
  
        var url = item.detailsUrl;
        return fetch(url).then(function (response) {
            return response.json();
            document.write("loadDetails  then\n");
  
        }).then(function (details) {
            //item.imageUrl = details.sprites.front_default; //do not know sprities ???
            item.height = details.height;
            item.types = details.types;
        }).catch(function (e) {
            console.error(e);
        });
    }
  
    function showDetails(item) {
        loadDetails(item).then(function () {
        })
    }
  
    return{
        add: add,
        getAll: getAll,
        loadList: loadList,
        loadDetails: loadDetails,
        showDetails: showDetails
    };
  })();
  
  function addListItem(pokemone) {
        var container = document.querySelector('.pokemon-list');
        var listItem = document.createElement('li');
        var button = document.createElement('button');
        button.innerText = pokemone.name;
        container.appendChild(listItem); //object breaks
        listItem.appendChild(button);
        button.addEventListener('click', function (event) { //object breaks
            pokemonRepository.showDetails(pokemone);
        });
  }
    pokemonRepository.loadList().then(function () {
  
    pokemonRepository.getAll().forEach(function (pokemon) {
        addListItem(pokemon);
    })
    })
  </code></pre>