Lorem-Ipsum

前言

• Lorem Ipsum假文介紹 : https://ithelp.ithome.com.tw/articles/10130206

功能說明

1. 標題
2. 輸入區域 : 可以輸入0~9之間的數字x
3. 顯示結果 : 產生出x段的假文

HTML重點

• 標題

  <h3>tired of boring lorem ipsum?</h3>
  

• 輸入區域

  <!-- form -->
  <form class="lorem-form">
      <!-- label -->
      <label for="amount">paragraphs:</label>
  
      <!-- 輸入方格 -->
      <input type="number" name="amount" id="amount" placeholder="5"/>
  
      <!-- Submit按鈕 -->
      <button type="submit" class="btn">generate</button> 
  </form>
  

  • 將整個form的Class設為lorem-form
  • 將輸入方格的id設為amount，並讓其預設顯示5

• 顯示結果 :

  <article class="lorem-text"></article>
  

  • 將整個顯示結果的Class設為lorem-text

JavaScript重點

1. 將所有假文存入text陣列中

   const text = [`Jelly sweet roll jell...`,...]
   

2. 利用class="lorem-form"去抓取整個form

   const form = document.querySelector(".lorem-form");
   

3. 利用id="amount"去抓取輸入方格

   const amount = document.getElementById("amount");
   

4. 利用class="lorem-text"去抓取顯示結果

   const result = document.querySelector(".lorem-text");
   

5. 預設輸入方格的值為5

   amount.value = "5";
   

6. 為form新增提交事件

   form.addEventListener("submit", function (e) {
       //Details...
   }
   

下列程式碼皆在form.addEventListener()之內

7. 按了按鈕之後，停止提交表單

   e.preventDefault();
   

   • 因為Submit事件是一瞬間的事，若沒有使用preventDefault()，顯示結果將會顯示一下便消失
   • 詳請請閱讀下方參考資料

8. 將輸入方格的值轉為數字

   const value = parseInt(amount.value);
   

9. 在索引值0~9之間隨機取一數

   const random = Math.floor(Math.random() * text.length);
   

   • 詳情於【04】網頁練習 - 更改背景顏色中有提到

10. 在索引值0~9之間隨機取一數

    if (isNaN(value) || value < 0 || value > 9) { 
    // 若Value大於9、小於0或是NaN
    
        result.innerHTML = `<p class="result">${text[random]}</p>`;
        //隨機顯示一段假文
    
    } else {
    
        let tempText = text.slice(0, value);
        //回傳索引值為0~value的陣列
    
        tempText = tempText.map(function (item) {
            return `<p class="result">${item}</p>`;
        }).join("");
        //將陣列塞入HTML碼中，並轉為純字串
    
        result.innerHTML = tempText;
        //將該字串設為顯示結果article的內容碼
    }
    

    • innerHTML、Array.map()與Array.join()於【11】網頁練習 - 分類型Menu(上)中有提到
    • Array.slice(begin, end) : 回傳一個新陣列，為原陣列選擇之begin至end（不含 end）的部分(原本的陣列將不會被修改)。

參考與引用來源

1. preventDefault()介紹
2. Array.slice()介紹