I'm trying to make it so that clicking any item on my list would then return a value in another section, based on an object which I've defined. In this case, clicking the countryName should turn up infoNarrative in another section.
Here's as far as I've gotten so far (I'm an obvious beginner on HTML/Javascript and working through these problems is helpful for my learning). Please feel free to suggest any smarter suggestions, I'll be happy to learn other simple approaches too.
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;
}
I think the basic problem is that when you try to set the innerHTML, you need to use countryData[testValue] not countryData.testValue. The first will look for a key which is the value of testValue variable. The second will look for the "testValue" key which is not in your data set.
Also, you were invoking displayNarrative when you added the event listener instead of handing that thing a function that would get executed on the click.
Here's a working solution with a slight addition. I added class="countryItem" to the html li tags so that you could easily select all items in the list and attach the event listener to them.
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>