通过单击项目显示对象中的相应值（HTML 和 Javascript）

Question

我正在尝试做到这一点，以便单击我的列表中的任何项目然后 return 另一个部分中的值，基于我定义的对象。在这种情况下，单击 countryName 应该会在另一部分中显示 infoNarrative。

这是我到目前为止所了解的（我显然是 HTML/Javascript 的初学者，解决这些问题对我的学习很有帮助）。请随时提出任何更明智的建议，我也很乐意学习其他简单的方法。

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;
    }

Answer 1

我认为基本问题是当您尝试设置 innerHTML 时，您需要使用 countryData[testValue] 而不是 countryData.testValue。第一个将查找一个键，它是 testValue 变量的值。第二个将查找不在您的数据集中的“testValue”键。

另外，当您添加事件侦听器时，您正在调用 displayNarrative，而不是将那个东西交给一个在点击时执行的函数。

这是一个稍作补充的可行解决方案。我将 class="countryItem" 添加到 html li 标签中，以便您可以轻松地 select 列表中的所有 项目并附加事件侦听器给他们。

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>

通过单击项目显示对象中的相应值（HTML 和 Javascript）

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

html

javascript

dom

object