HTML部分：

        <main>
            <div>
                <button id="allButton">
                <span>獲取笑話</span>
                </button>
                <p id="joke"></p>

            </div>
        </main>

1. <main>：這是HTML中的一個標記，表示主要的內容區塊。通常用於包裹網頁的主要內容部分。

2. <div>：這是一個HTML區塊元素，用於組織和包裹其他HTML元素，這裡是用來包裹後續的按鈕和段落。

3. <button id="allButton">：這是一個HTML按鈕元素。它有一個ID屬性為"allButton"，這個ID可以用於JavaScript代碼中來識別和操作該按鈕。

4. <span>獲取笑話</span>：這是一個HTML <span> 元素，包含了文字 "獲取笑話"。通常，<span> 用於對內容的一部分進行樣式設置或操作。

5. </button>：HTML按鈕元素的結束標籤。

6. <p id="joke"></p>：這是一個HTML段落元素，具有一個ID屬性為"joke"。類似於按鈕的ID，這個ID可以用於JavaScript代碼中來識別和操作該段落。

js部分：

document.addEventListener('DOMContentLoaded', function() {
  const getJokeBtn = document.getElementById('allButton');
  const jokeElement = document.getElementById('joke');

  getJokeBtn.addEventListener('click', function() {
      // 發送GET請求獲取笑話
          fetch('https://v2.jokeapi.dev/joke/Any')
          .then(response => response.json())
          .then(data => {
              // 將笑話顯示在網頁上
              jokeElement.textContent = `${data.setup} ${data.delivery}`;
          })
          .catch(error => {
              console.error('獲取笑話時出錯：', error);
              jokeElement.textContent = '無法獲取笑話。';
          });
  });
});

1. document.addEventListener('DOMContentLoaded', function() {：這行代碼使用addEventListener函數來綁定一個事件處理器，該處理器在DOM完全載入後執行。換句話說，它等待整個網頁的結構和內容都讀取完畢後再執行接下來的代碼。

2. const getJokeBtn = document.getElementById('allButton');：這行代碼用於獲取具有ID為"allButton"的HTML按鈕元素的引用。這個按鈕在HTML中用於觸發獲取笑話的操作。

3. const jokeElement = document.getElementById('joke');：這行代碼用於獲取具有ID為"joke"的HTML段落元素的引用。這個段落元素將用於顯示獲取的笑話。

4. getJokeBtn.addEventListener('click', function() {：這行代碼綁定了一個事件處理器，當按鈕被點擊時執行。具體來說，當按鈕被點擊時，這個函數將被調用，然後執行以下操作：

   • 使用fetch函數向指定的URL（https://v2.jokeapi.dev/joke/Any）發送GET請求，以獲取一個笑話。
   • 一旦獲取到回應，使用.json()方法將回應的JSON數據轉換為JavaScript對象。
   • 接著，使用該對象的屬性 setup 和 delivery 將笑話的兩個部分合併，並將結果設置為jokeElement元素的文字內容，以顯示在網頁上。

5. .catch(error => {：這行代碼是一個錯誤處理程序，當發生錯誤時執行。它捕捉fetch請求或任何後續處理中可能出現的錯誤，並將錯誤消息打印到控制台，同時將"無法獲取笑話。"設置為jokeElement元素的文字內容，以通知用戶無法獲取笑話。

目前製作成果：