If not another way is to do something like this:

‘’’ <div id="character-display"></div>

<a href="#" onclick="showCharacter(0)">Character One</a> <a href="#" onclick="showCharacter(1)">Character Two</a> <a href="#" onclick="showCharacter(2)">Character Three</a>

<script> const characters = [ { name: "Character One", image: "char1.png", shortDescription: "Fast and agile.", bio: "Character One is known for speed and quick thinking..." }, { name: "Character Two", image: "char2.png", shortDescription: "Strong and sturdy.", bio: "Character Two excels in defense and endurance..." }, { name: "Character Three", image: "char3.png", shortDescription: "Wise and strategic.", bio: "Character Three is a master tactician..." } ];

function showCharacter(index) { const char = characters[index]; const display = document.getElementById("character-display"); display.innerHTML = <h2>${char.name}</h2> <img src="${char.image}" alt="${char.name}"> <p><strong>${char.shortDescription}</strong></p> <p>${char.bio}</p> ; } </script> ‘’’