如何实现用户点击选项后显示墨西哥历史事件的对应年份？

我有一款猜墨西哥历史事件先后顺序的网页游戏，当前功能正常，但想实现用户点击选项后，在每个选项下方显示对应事件的发生年份。尝试通过事件监听器实现但没成功，求技术帮助。

原代码如下：

<html>
  <head>
    <title>Invention Game</title>
    <style>
      body {
        background-image: url("https://media-cldnry.s-nbcnews.com/image/upload/newscms/2019_18/1432153/cinco-de-mayo-celebrations-today-main-190501.jpg");
        background-size: cover;
      }
      
      #game-board {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      
            button {
        font-size: 2.4em;
        margin: 70px;
        padding: 30px;
      }
      
      /* added styles for the h1 element */
      h1 {
        font-size: 2.5em;
        background-color: #ccc;
        padding: 20px 20px 10px 10px;


      }

      h2 {
        font-size: 2em;
        background-color: #ccc;
        padding: 10px 10px 10px 10px;

      
      }
    </style>
  </head>
  <body>
    
    <h1><center>What happened first?</center></h1>
    <div id="game-board">
      <h2>Score: <span id="score">0</span></h2>
      <div>
        <button id="item1"></button>
        <button id="item2"></button>
      </div>


    <script>
      // generate a list of items and their corresponding years
      const itemList = [
        { item: "The Battle Of Puebla", year: 1862 },
        { item: "Mexican Independance Declared", year: 1810 },
        { item: "The Mexican Peso becoming the official currency of mexico", year: 1823 },
        { item: "The First Commercial Flight by a Mexican Airline", year: 1921},
        { item: "The Establishing of the Bank Of Mexio", year: 1925},
        { item: "The First Celebration of Cinco De Mayo in the USA", year: 1863},
        { item: "The Mexican Revolution", year: 1910},
        { item: "The DISCOVERY of Machu Picchu", year: 1911},


        // add more items and years as needed
      ];

      // randomly select two items from the list
      let item1, item2;
      function selectItems() {
        item1 = itemList[Math.floor(Math.random() * itemList.length)];
        item2 = itemList[Math.floor(Math.random() * itemList.length)];
        
        // make sure item1 and item2 are not the same item
        while (item1.item === item2.item) {
          item2 = itemList[Math.floor(Math.random() * itemList.length)];
        }
      }
      selectItems();

      // display the items on the game board
      const item1Btn = document.getElementById("item1");
      const item2Btn = document.getElementById("item2");
      item1Btn.textContent = item1.item;
      item2Btn.textContent = item2.item;

      // add event listener to the buttons
      let score = 0;
      item1Btn.addEventListener("click", () => {
        if (item1.year < item2.year) {
          // user was correct
          score++;
          document.getElementById("score").textContent = score;

          
        } else {
          // user was incorrect
          score = 0;
          document.getElementById("score").textContent = score;
          alert("Incorrect!");
          
        }
        selectItems();
        item1Btn.textContent = item1.item;
        item2Btn.textContent = item2.item;
      });

      item2Btn.addEventListener("click", () => {
        if (item2.year < item1.year) {
          // user was correct
          score++;
          document.getElementById("score").textContent = score;
          
        } else {
          // user was incorrect
          score = 0;
          document.getElementById("score").textContent = score;
          alert("Incorrect!");
          
        }
        selectItems();
        item1Btn.textContent = item1.item;
        item2Btn.textContent = item2.item;
      });

      // add event listener to the play again button
      const playAgainBtn = document.getElementById("play-again");
      playAgainBtn.addEventListener("click", () => {
        score = 0;
        document.getElementById("score").textContent = score;
        selectItems();
        item1Btn.textContent = item1.item;
        item2Btn.textContent = item2.item;
      });
    </script>
  </body>
</html>

以下是修改后的完整代码，已实现点击后显示年份的功能，同时修复了原代码中的拼写错误和缺失元素：

<html>
  <head>
    <title>Mexico History Timeline Game</title>
    <style>
      body {
        background-image: url("https://media-cldnry.s-nbcnews.com/image/upload/newscms/2019_18/1432153/cinco-de-mayo-celebrations-today-main-190501.jpg");
        background-size: cover;
        min-height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
      }
      
      #game-board {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
      }
      
      button {
        font-size: 1.8em;
        margin: 20px;
        padding: 20px 40px;
        background-color: #fff;
        border: 3px solid #d4af37;
        border-radius: 10px;
        cursor: pointer;
        transition: background-color 0.3s;
      }
      
      button:hover {
        background-color: #f0e68c;
      }
      
      h1 {
        font-size: 2.5em;
        background-color: rgba(204, 204, 204, 0.9);
        padding: 20px;
        border-radius: 10px;
        margin: 20px 0;
        text-align: center;
      }

      h2 {
        font-size: 2em;
        background-color: rgba(204, 204, 204, 0.9);
        padding: 15px;
        border-radius: 10px;
        margin: 10px 0;
      }
      
      .year-display {
        font-size: 1.5em;
        font-weight: bold;
        color: #fff;
        text-shadow: 2px 2px 4px #000;
        margin-top: -10px;
        margin-bottom: 20px;
      }
      
      .option-container {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      
      #play-again {
        font-size: 1.5em;
        margin-top: 30px;
      }
    </style>
  </head>
  <body>
    
    <h1>What happened first?</h1>
    <div id="game-board">
      <h2>Score: <span id="score">0</span></h2>
      <div style="display: flex; gap: 40px;">
        <div class="option-container">
          <button id="item1"></button>
          <div id="year1" class="year-display"></div>
        </div>
        <div class="option-container">
          <button id="item2"></button>
          <div id="year2" class="year-display"></div>
        </div>
      </div>
      <button id="play-again">Play Again</button>
    </div>

    <script>
      // 历史事件列表（修复拼写错误）
      const itemList = [
        { item: "The Battle Of Puebla", year: 1862 },
        { item: "Mexican Independence Declared", year: 1810 },
        { item: "The Mexican Peso becoming the official currency of Mexico", year: 1823 },
        { item: "The First Commercial Flight by a Mexican Airline", year: 1921},
        { item: "The Establishing of the Bank Of Mexico", year: 1925},
        { item: "The First Celebration of Cinco De Mayo in the USA", year: 1863},
        { item: "The Mexican Revolution", year: 1910},
        { item: "The Discovery of Machu Picchu", year: 1911}
      ];

      let item1, item2;
      let score = 0;
      const item1Btn = document.getElementById("item1");
      const item2Btn = document.getElementById("item2");
      const year1El = document.getElementById("year1");
      const year2El = document.getElementById("year2");
      const scoreEl = document.getElementById("score");
      const playAgainBtn = document.getElementById("play-again");

      // 随机选择两个不同事件
      function selectItems() {
        item1 = itemList[Math.floor(Math.random() * itemList.length)];
        item2 = itemList[Math.floor(Math.random() * itemList.length)];
        
        while (item1.item === item2.item) {
          item2 = itemList[Math.floor(Math.random() * itemList.length)];
        }
        
        // 更新按钮文本，清空年份显示
        item1Btn.textContent = item1.item;
        item2Btn.textContent = item2.item;
        year1El.textContent = "";
        year2El.textContent = "";
      }

      // 显示年份并延迟刷新题目
      function showYearsAndRefresh() {
        year1El.textContent = `Year: ${item1.year}`;
        year2El.textContent = `Year: ${item2.year}`;
        // 2秒后刷新题目
        setTimeout(selectItems, 2000);
      }

      // 初始化游戏
      selectItems();

      // 按钮点击事件
      item1Btn.addEventListener("click", () => {
        if (item1.year < item2.year) {
          score++;
        } else {
          score = 0;
          alert("Incorrect!");
        }
        scoreEl.textContent = score;
        showYearsAndRefresh();
      });

      item2Btn.addEventListener("click", () => {
        if (item2.year < item1.year) {
          score++;
        } else {
          score = 0;
          alert("Incorrect!");
        }
        scoreEl.textContent = score;
        showYearsAndRefresh();
      });

      // 重新开始按钮事件
      playAgainBtn.addEventListener("click", () => {
        score = 0;
        scoreEl.textContent = score;
        selectItems();
      });
    </script>
  </body>
</html>

• 新增年份显示元素：给每个按钮添加了对应的<div>容器（year1和year2），专门用来展示年份，并通过CSS样式让年份更醒目
• 调整点击逻辑：点击按钮后先显示两个事件的年份，通过setTimeout延迟2秒再刷新新题目，让用户有足够时间查看年份信息
• 修复原代码问题：修正了拼写错误（如Independance→Independence、Mexio→Mexico），添加了缺失的“Play Again”按钮
• 优化样式：调整了按钮布局、背景透明度和交互效果，提升游戏体验

内容的提问来源于stack exchange，提问作者Sam Alonso