Lorem-Ipsum

前言

功能說明

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

HTML重點

  • 標題

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

  • 輸入區域

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- 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

  • 顯示結果 : 

    1
    <article class="lorem-text"></article>
    • 將整個顯示結果的Class設為lorem-text

JavaScript重點

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

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

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

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

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

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

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

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

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

    1
    amount.value = "5";

  6. 為form新增提交事件

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

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

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

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

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

    1
    const value = parseInt(amount.value);

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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()介紹