在 HTML 中禁用按钮 2 秒

问题描述 投票：0回答：1

此代码用于提示用户单击他们认为首先发生的事件的网站。用户做出猜测后，年份会在按钮下方显示 2 秒。我正试图让它在那 2 秒内无法点击按钮，因为你可以垃圾邮件点击正确的答案并且它会积累很多积分。

<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: 1821 },
        { 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 2 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;
        }, 2000);
      });

      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 2 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;
        }, 2000);
      });

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

我尝试使用此代码禁用按钮，但它只是让它们消失并搞砸了网站

<script>
function disableButton() {
  document.getElementById("item1Btn").disabled = true;
  setTimeout(function() {
    document.getElementById("myButton").disabled = false;
  }, 2000);
}
</script>

每次显示年份时，我都将此代码用于按钮 1 和 2，但是当我运行代码时，按钮中什么也没有出现，当我点击它们时也没有任何反应。任何帮助将不胜感激。

javascript html button
1个回答
0
投票

你需要

disable="true"
用户点击答案后的按钮。

const itemList = [
      { item: "The Battle Of Puebla", year: 1862 },
      { item: "Mexican Independance Declared", year: 1821 },
      { 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;
         item1Btn.disabled = true;
         item2Btn.disabled = true;
      } else {
         // user was incorrect
         score = 0;
         document.getElementById("score").textContent = score;
         alert("Incorrect!");
         item1Btn.disabled = true;
         item2Btn.disabled = true;
      }
      
      //  ======== 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 2 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;
         item1Btn.disabled = false;
         item2Btn.disabled = false;
      }, 2000);
   });

   item2Btn.addEventListener("click", () => {
      if (item2.year < item1.year) {
         // user was correct
         score++;
         document.getElementById("score").textContent = score;
         item1Btn.disabled = true;
         item2Btn.disabled = true;
      } else {
         // user was incorrect
         score = 0;
         document.getElementById("score").textContent = score;
         alert("Incorrect!");
         item1Btn.disabled = true;
         item2Btn.disabled = true;
      }
      
      //  ======== display the year ===========
      item1Btn.textContent += '\n Year is: ' + item1.year;
      item2Btn.textContent += '\n Year is: ' + item2.year;
   
      // ========== Wait 2 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;
         item1Btn.disabled = false;
         item2Btn.disabled = false;
      }, 2000);
   });

   // 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;
   });
body {
   background-image: url("");
   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;


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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.