Estoy tratando de hacer que hacer clic en cualquier elemento de mi lista devuelva un valor en otra sección, según un objeto que he definido. En este caso, al hacer clic en el nombre del país debería aparecer infoNarrative en otra sección.
Esto es todo lo que he llegado hasta ahora (soy un principiante obvio en HTML/Javascript y resolver estos problemas es útil para mi aprendizaje). Siéntase libre de sugerir cualquier sugerencia más inteligente, estaré feliz de aprender otros enfoques simples también.
HTML
<div class="sidebar"> <div class="heading"> <h1>Countries</h1> </div> <ul class="countryList"> <li id = "afghanistan">Afghanistan</li> <li id = "bangladesh">Bangladesh</li> </ul> <div id="narrative" class="narrative"> Narrative Should Turn Up Here</div>JavaScript
'afghanistan': { countryName: 'Afghanistan', 'infoNarrative': 'afg lorem ipsum dolor sit amet', 'link': 'google.com' }, 'bangladesh': { countryName: 'Bangladesh', 'infoNarrative': 'bgd lorem ipsum dolor sit amet', 'link': 'google.com' } }; document.getElementById("afghanistan").addEventListener("click", displayNarrative()); function displayNarrative(testValue) { document.getElementById("narrative").innerHTML = countryData.testValue.infoNarrative; }Creo que el problema básico es que cuando intenta configurar el HTML interno, necesita usar countryData[testValue] no countryData.testValue . El primero buscará una clave que es el valor de la variable testValue . El segundo buscará la clave "testValue" que no está en su conjunto de datos.
Además, estaba invocando displayNarrative cuando agregó el detector de eventos en lugar de entregarle a esa cosa una función que se ejecutaría con el clic.
Aquí hay una solución de trabajo con una ligera adición. Agregué class="countryItem" a las etiquetas html li para que pueda seleccionar fácilmente todos los elementos de la lista y adjuntarles el detector de eventos.
document.addEventListener("DOMContentLoaded", () => { const countryData = { afghanistan: { countryName: "Afghanistan", infoNarrative: "afg lorem ipsum dolor sit amet", link: "google.com" }, bangladesh: { countryName: "Bangladesh", infoNarrative: "bgd lorem ipsum dolor sit amet", link: "google.com" } }; const items = document.getElementsByClassName('countryItem') Array.from(items).forEach(function(item) { item.addEventListener('click', function() { displayNarrative(item.id) }) }) function displayNarrative(countryKey) { const countryInfo = countryData[countryKey] document.getElementById("narrative").innerHTML = countryInfo.infoNarrative; } }); <div class="sidebar"> <div class="heading"> <h1>Countries</h1> </div> <ul class="countryList"> <li class="countryItem" id="afghanistan">Afghanistan</li> <li class="countryItem" id="bangladesh">Bangladesh</li> </ul> <div id="narrative" class="narrative"> Narrative Should Turn Up Here</div> </div>