Show Corresponding Value in an Object by Clicking an Item (HTML and Javascript)-CodePudding

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 >
  <div >
    <h1>Countries</h1>
  </div>
    <ul >
    <li id = "afghanistan">Afghanistan</li>
    <li id = "bangladesh">Bangladesh</li>
    </ul>  
<div id="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;
    }

CodePudding user response：

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 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 >
  <div >
    <h1>Countries</h1>
  </div>
  <ul >
    <li  id="afghanistan">Afghanistan</li>
    <li  id="bangladesh">Bangladesh</li>
  </ul>
  <div id="narrative" >
    Narrative Should Turn Up Here</div>
</div>