I’m building a Pokemon team builder app. I want to click a button (which displays a Pokemons image so I know who it is) and have the data from a dictionary (image, name, moves, ability, etc.) displayed on the top div under the class “monster” (replacing the egg image). Just not sure where to get started.
html
<h2>Current Team</h2>
<div id="your-team" class="team">
<div class="slot">
<div class="monster">
<img src="egg.png" alt="">
</div>
<div class="info">
<p>test</p>
</div>
</div>
<h2>All Pokemon</h2>
<div class="your-options" id="options">
<div class="all-monsters" id="all">
<ol class="list-pokemon">
<li>
<button>
<img src="treecko.png" alt="">
</button>
</li>
<li>
<button>
<img src="grovyle.png" alt="">
</button>
</li>
<li>
<button>
<img src="sceptile.png" alt="">
</button>
</li>
</ol>
</div>
</div>
dictionary (stored in a separate text file)
let pokemon = {
252: {
"name": "Treecko",
"type": "Grass",
"ability": "Overgrow",
"height": "1'08''",
"weight": "11.0lbs",
"location": "Starter Pokemon",
"moves": {
"Level --": "Pound",
"Level --": "Leer",
"Level 6": "Absorb",
"Level 11": "Quick Attack",
"Level 16": "Pursuit",
"Level 21": "Screech",
"Level 26": "Mega Drain",
"Level 31": "Agility",
"Level 36": "Slam",
"Level 41": "Detect",
"Level 46": "Giga Drain",
"Level 50": "Energy Ball"
},
},
}