How would I display something after the user clicks an option - Html

SamAlonso
April 24, 2023
153 views
0 votes
2 Answers

This code is for a website that prompts the user to guess which historical Mexican event took place first. It works how I want other then that I want the year each event took place to be displayed underneath each option after the user makes their selection.


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

I tried experimenting with event listeners to trigger when a button is pressed and have the year displayed but I couldn’t get anything to work. I think this is currently beyond my abilities but I am open to learning new things. Thank you to anyone who helps.

Answers

You have not written the code for displaying year. Here is your modified code which displays year.

    <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>
        <h2 id="year">Year:</h2>
        <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;
          document.getElementById("year").textContent=item1.year
          

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

Hope this helps.

I assume you want the year to show up below the text on the button when it is clicked? However, with you calling the selectItems function in the event listener, the text will be overwritten when it is clicked, so a delay has to be added. More information in the comments.
Also your game-board div has no closing tag.

<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;
        /* ========= add this to keep the whitespace to that the new line shows properly ========== */
        white-space: pre;
      }
      
      /* 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>
    </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!");
        }
        
        //  ======== display the year on both buttons, n is a new line so that it shows below the text===========
        item1Btn.textContent += 'n Year is: ' + item1.year;
        item2Btn.textContent += 'n Year is: ' + item2.year;
      
        // ========== Wait 5 seconds and then change the text to the next one
        // so that the year can be seen by the user, and not changed instantly ===========
        setTimeout(() => {
            selectItems();
          item1Btn.textContent = item1.item;
            item2Btn.textContent = item2.item;
        }, 5000);
      });

      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!");
        }
        
        //  ======== display the year ===========
        item1Btn.textContent += 'n Year is: ' + item1.year;
        item2Btn.textContent += 'n Year is: ' + item2.year;
      
        // ========== Wait 5 seconds and then change the text to the next one
        // so that the year can be seen by the user, and not changed instantly ===========
        setTimeout(() => {
            selectItems();
          item1Btn.textContent = item1.item;
            item2Btn.textContent = item2.item;
        }, 5000);
      });

      // add event listener to the play again button
      // ============= your play again button is not found, so it will error, so you should add it ===============
      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>

Please signup or login to give your own answer.

Click here to cancel reply.

How would I display something after the user clicks an option – Html

Answers