[SOLVED] Cannot read properties of undefined (reading 'image')

[_Maestro_]

Hi all,

I am a newbie. I have some php, js, css and html experience and a good drive and wish to understand it all.
But I am currently stuck with a javascript error: Cannot read properties of undefined (reading 'image'). after googling it seems it says one of my variables is empty... but i can't figure out which one and what to do.

I have two decks of cards. The first deck needs to show me three random cards from that deck. This is done all successful. so far so good.
The second deck is a different set of cards and it needs to show 10 random cards form that deck. Even though I am using 99% the same code as my first deck (which is working), i just can't get the second deck shown. As mentioned it gives me this annoying error:

Javascript error:
During pageload
Cannot read properties of undefined (reading 'image')
TypeError: Cannot read properties of undefined (reading 'image')
at Object.updateDisplay

Before I show you snippets of my code, I can tell you the image is correctly spelled and in the same directory as the other image. Also in the database i can see it has generated the 10 random cards with card_location 'navontable'

PHP game file:
In the set up part i create the deck based on an array $navCard. Only at the true startup it must give one specific card to each player. Once the card is given, I set the globalvalue on1 (so it does not give the cards again on reloading) and I shuffle the deck.

Code: Select all

         $this->navCards->createCards( $navCard, 'deck' ); 
         if(self::getGameStateValue('vaultCardsSetup')<>1){
          foreach( $players as $player_id => $player )
          {
           $specialCards = $this->navCards->pickCards( 1, 'deck', 'vault' );
      	   $this->setGameStateInitialValue('vaultCardsSetup', 1);
          }  
         } 
         $this->navCards->autoreshuffle = true;
         $this->navCards->shuffle( 'deck' );

In the getalldatas part:
I only want to draw the 10 random cards once, so only when the global variable is not equal to zero.

Code: Select all

       $result = array();
        if(self::getGameStateValue('navCardsSetup')<>1){
         $cards = $this->navCards->pickCardsForLocation( 10, 'deck','navontable');
 	 $this->setGameStateInitialValue('navCardsSetup', 1);
        }  
        $result['showNavigation'] = $this->navCards->getCardsInLocation('navontable');

In javascript file:
In the constructor part:
navCards is the id of the div in the tpl is needs to be displayed in.

Code: Select all

            this.navDeck = new ebg.stock();
            this.navDeck.create( this, $('navCards'), this.navCardWidth, this.navCardHeight);
            this.navDeck.image_items_per_row = 9;
            for (var vertical = 0; vertical < 2; vertical++) {
                for (var horizontal = 0; horizontal < 9; horizontal++) {
                    var card_type_id = vertical*9 + horizontal;
                    this.navDeck.addItemType(card_type_id, card_type_id, g_gamethemeurl + 'img/navcards.jpg', card_type_id);
                }
            }

In the gamedatas part:

Code: Select all

 
            for (var i in this.gamedatas.showNavigation) {
                var card = this.gamedatas.showNavigation[i];
                var vertical = card.type;
                var horizontal = card.type_arg;
                this.navDeck.addToStockWithId(vertical*9 + horizontal, card.id);
            }

TPL file:

Code: Select all

<div id="river" class="whiteblock" style="width:100%;">
  <div id="navCards" style="margin-top:5px">
  </div>
</div>

Anyone has a clue on where this goes wrong? Or maybe on how I can see whether certain arrays are not NULL.

Thanks in advance
Maurice

[robinzig]

It's hard to know the root cause of your error, but from the message:

Javascript error:
During pageload
Cannot read properties of undefined (reading 'image')
TypeError: Cannot read properties of undefined (reading 'image')
at Object.updateDisplay

It's clear that this comes from a Javascript method called `updateDisplay`. Do you have a method with such a name in your js file? If so, look there and in particular at anywhere you're accessing a property called `image` on anything - if so, then that variable, that you expect to be an object with an `image` property, is in fact `undefined`. You can try putting a breakpoint there (`debugger` statement in your code is required, if this only runs on pageload) and stepping through to see what is happening - without seeing where the actual error is, it's impossible to say more.

If the `updateDisplay` is actually being called in BGA framework code then it's harder to diagnose - but you can still try to gain an understanding of what is going wrong, and where. For one thing, the error in the console will have a code reference that you can click on to see the piece of code that has directly caused the crash. That will show you straight away whether it's your code or BGA code. If it's BGA, then you can at least look further up in the callstack (which is shown in the console below the error message), at which parts of your code are involved.

If really in doubt, since this happens on pageload it's most likely to be something in, or called from, your `setup` method. Even if nothing else helps you can step through that with the debugger, or by putting console.log statements between each line, to see at precisely which point it goes wrong.

Hope this helps you get started - debugging BGA code isn't always pleasant Good luck!

[RicardoRix]

update display is to do with the stock component.

I think it's when you're trying to addToStock, you are specifying a 'type' that doesn't exist.
You should be able to
F12

Code: Select all

debugger; 

to break on it and have a look.

[_Maestro_]

Thank you... i found the issue via the debugging.

where I want to sum the two variables vertical and horizontal, it actually concatenate the numbers instead of summing up. So it gave a result of '02' instead of '2'.
Adding number() to the variables resolved the issue.