Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

I have no clue what is wrong with my code! please help!

Before we get into my code let me elaborate. I am doing a coding course and this should be a reletively simple task where my pokemon array list should show up, once I run it, in a list as buttons that I can click. However, nothing shows up and I have no clue why. I would very much appreciate some help with this. Below you will find my JS and HTML



JavaScript:
let pokemonRepository = (function () {
  let pokemonList = [
    { name: 'Pikachu', type: 'electric', height: 2},
    { name: 'Charizard', type: 'fire', height: 6},
    { name: 'Squirtle', type: 'water', height: 3}
  ];
});

  function add(pokemon) {
    pokemonList.push(pokemon);
  }

  function getAll() {
    return repository;
  }

  function addListItem(pokemon){
    let pokemonList = document.querySelector('.pokemon-list');
    let listPokemon = document.createElement('li');
    let button = document.createElement('button');
    button.innerText = pokemon.name;
    button.classList.add('button-class');
    listPokemon.appendChild(button);
    pokemonList.appendChild(listpokemon);
    button.addEventListener ('click', function(event){
      showDetails(pokemon);
    });
  }

  function showDetails(pokemon) {
    console.log()
  };

  return {
    add: add,
    getAll: getAll,
    addListItem: addListItem,
    showDetails: showDetails
  };
})();

pokemonRepository.getAll().forEach(function (pokemon) {
  pokemonRepository.addListItem(pokemon);
});



HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Simple JS App</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
  </head>
  <body>
    <header class="page-header">
    <!-- NOTE:Add your logo here  -->
      <img width="200" src="img/logo.png"  alt="logo" class="page-header__item" >
      <h1>Pokedex</h1>
      <ul class='pokemon-list'></ul>
      <script src="js/promise-polyfill.js"></script>
      <script src="js/scripts.js"></script>
    </header>
  </body>
</html>
 
Last edited by a moderator:
Check line 40.

JavaScript:
let pokemonRepository = (function () {
  let pokemonList = [
    { name: 'Pikachu', type: 'electric', height: 2},
    { name: 'Charizard', type: 'fire', height: 6},
    { name: 'Squirtle', type: 'water', height: 3}
  ];
});

 function add(pokemon) {
   pokemonList.push(pokemon);
 }

 function getAll() {
   return repository;
 }

 function addListItem(pokemon){
   let pokemonList = document.querySelector('.pokemon-list');
   let listPokemon = document.createElement('li');
   let button = document.createElement('button');
   button.innerText = pokemon.name;
   button.classList.add('button-class');
   listPokemon.appendChild(button);
   pokemonList.appendChild(listpokemon);
   button.addEventListener ('click', function(event){
     showDetails(pokemon);
   });
 }

 function showDetails(pokemon) {
   console.log()
 };

 return {
   add: add,
   getAll: getAll,
   addListItem: addListItem,
   showDetails: showDetails
 };
})();   /// <- whats these

pokemonRepository.getAll().forEach(function (pokemon) {
  pokemonRepository.addListItem(pokemon);
});

Either you have some extra bracket etc there or you closed list too early in the beginning.
 
those are to make my variables more local so that in the future it wont be affected by more global variables. IIFE
But either way I tried deleting them and it still didnt pop up. Same with various trys at deleting the brackets before and leaving the ones below, etc...
Any other ideas?
I appreciate the help btw!! very very much appreciated
 
hmm...im bit new to js myself too. But i think better approach would be

Code:
var Func = {
    functionname: function() {}, // comma to seperate functions
    functionname2: function() {}
}
 
Have you tried pressing F12 to bring up the debugger and look at the Console output ? Errors in the JS usually show up loud and clear there.
 
Thanks man! This is a cool little website that I didnt know about. I put it in my code and it seems you were right about some of it.

40:1 error Parsing error: Unexpected token 38 | showDetails: showDetails 39 | }; > 40 | })(); | ^ 41 | 42 | pokemonRepository.getAll().forEach(function (pokemon) { 43 | pokemonRepository.addListItem(pokemon);

Now i know where the problem is.....which is HUGE! I just don't know how to correct the problem.....
 
I hope you understand all this juggling with functions as arguments and set members... because I certainly don't. But I must admit I never go there anyway, and try to avoid this stuff like the plague 😀

Looking at the code, trying to match the brackets, it seems to me that this line 40 })(); /// <- whats these should not be there at all. But I don't understand this return statement at all... it does not seem to be in a function !? At least I think not - but you did not post the complete code so anything is possible. And if that return worked (which it now doesn't, I think) you would never reach the last statement on line 42, right ? Hmmm...

IMO your most important task is not so much correcting the problem as understanding the code you wrote. Although your comment in line 40 makes me think you just copied it from somewhere.

Last remark, you do not put a semicolon after the closing bracket of a function (showDetails). It's not a problem, just bad programming.
 
Oh one other thing ! You said 'nothing shows up'. This would not surprise me because your output statement console.log() only prints a blank line 😁
 
I hope you understand all this juggling with functions as arguments and set members... because I certainly don't. But I must admit I never go there anyway, and try to avoid this stuff like the plague 😀

Looking at the code, trying to match the brackets, it seems to me that this line 40 })(); /// <- whats these should not be there at all. But I don't understand this return statement at all... it does not seem to be in a function !? At least I think not - but you did not post the complete code so anything is possible. And if that return worked (which it now doesn't, I think) you would never reach the last statement on line 42, right ? Hmmm...

IMO your most important task is not so much correcting the problem as understanding the code you wrote. Although your comment in line 40 makes me think you just copied it from somewhere.

Last remark, you do not put a semicolon after the closing bracket of a function (showDetails). It's not a problem, just bad programming.
wow thanks for not helping me at all and just writing a bunch of complete nonsense. I'm a extremely beginner coder trying to learn and therefore on hear seeking help. And no i didnt just copy line 40 its called an IIFE....maybe look it up. I thought an expierenced coder like yourself might know a thing or too. but apparently your too focused on making other beginner coders feel bad in order to boost your mediocre ego?? Enjoy life
 
wow thanks for not helping me at all and just writing a bunch of complete nonsense. I'm a extremely beginner coder trying to learn and therefore on hear seeking help. And no i didnt just copy line 40 its called an IIFE....maybe look it up. I thought an expierenced coder like yourself might know a thing or too. but apparently your too focused on making other beginner coders feel bad in order to boost your mediocre ego?? Enjoy life
There is no need to get up close and personal. I may come across a bit heavy-handed sometimes (as I've been told before) but I am trying to help - which you hopefully realize once you've calmed down. Even though I did not know about IIFE's (it's the kind of stuff I tend to stay away from) this does not make all my points complete nonsense, even if they apparently did not help 😐
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom