JavaScript 系列六：第3課 ── 認識匿名函式

by applelily

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 系列六：第3課 ── 認識匿名函式</title>
    <link rel="stylesheet" href="./06_js_array-splice.css">
</head>
<body>
    <input type="text">
    <button id="add_btn" onclick="add()">新增事項</button>
    <div id="root">
    </div>
    <!--***** 切版start *****-->
    <!-- <div class="wrap">
        <h2>To Do List</h2>
        <hr>
        <div class="todo_input">
            <input type="text" placeholder="新增待辦事項">
            <button id="add_btn" onclick="add()">新增事項</button>
        </div>
        <div class="todos_container">
            <ul class="todoList">
                <li>
                     <span></span>   
                    <button class="delBtn">刪除</button>
                </li>
                
            </ul>
        </div>

    </div> -->
    <!--***** 切版end *****-->
   
    <script src="./06_js_array-splice.js"></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Playwrite+CU:[email protected]&display=swap');
*{
    padding: 0;
    margin: 0;
}

.wrap{
    margin: 30px auto;
    width: 800px;
    min-height: 600px;
    background-color: #a9c5d5;
    border-radius: 10px;
}
h2{
    padding-top: 20px;
    padding-left: 30px;
    font-family: "Kalam", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 35px;
    color:#e8626b;
}


input{
    width: 500px;
    margin: 20px 20px 20px 30px;
    padding-left: 5px;
    font-size: 20px;
    line-height: 2;
    border: 1px solid #889fad;
    color:#000;
    background-color: #fff;

}
input:hover, input:focus {
    outline: none;
    background-color: #eaeaa9;
}
#add_btn{
    border: none;
    font-size: 18px;
    border-radius: 5px;
    background-color: #000;
    color: #fff;
    padding: 10px;
}
#add_btn:hover{
    cursor: pointer;
    background-color: #17507b;
}
ul{
    min-height: 400px;
    margin:  0 30px;
    padding: 5px;
    border-radius: 5px;
    background-color: #8ca8ba;
    box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3);
}
li{
    display: flex;
    justify-content: space-between; /* 元素之間平均分布 */
    align-items: center; /* 垂直置中對齊 */
    margin: 10px 20px;
    border-bottom: 1px dotted #28292b;
    font-size: 18px;
    color: #000;
}
.delBtn{
    border: none;
    font-size: 15px;
    border-radius: 3px;
    background-color: #040404;
    color: #fff;
    padding: 10px;
}

.delBtn:hover{
    cursor: pointer;
    background-color: #b91919;
}

JavaScript

var todos = [];

function render_wrap(){
    const body = document.querySelector('body');
    const wrap = document.createElement('div');
    wrap.className='wrap';
    const h2 = document.createElement('h2');
    h2.textContent="To Do List";
    const hr = document.createElement('hr');


    // 取得現有的 input 和 button 元素
    const input_todo = document.querySelector('input');
    const add_btn = document.querySelector('#add_btn');

    // 取得現有的 root 容器
    const root = document.querySelector('#root');
 
    wrap.append(h2);
    wrap.append(hr);
    wrap.append(input_todo);
    wrap.append(add_btn);
    wrap.append(root);

    // 把 wrap 放到 body 裡面
    body.append(wrap);
    // 監聽 input 元素的鍵盤事件
    input_todo.addEventListener('keydown', function(event) {
        // 檢查是否按下 Enter 鍵 (keyCode 13)
        if (event.key === 'Enter') {
            add(); // 執行 add 函式
        }
    });
}


function add()
{
  // 請寫出此函式內容（更新 todos 陣列）
    const input_todo = document.querySelector('input');
    console.log(input_todo.value);
    let todo = input_todo.value.trim();
    if(todo !== ''){
        todos.push(todo);
        console.log(todos);
        render();
    }else {
        input_todo.focus();
        input_todo.placeholder = "新增待辦事項";
    }
    input_todo.value = '';
}

function render(){
    console.log('render....');
    const root = document.querySelector('#root');
    root.textContent='';
    const div_container=document.createElement('div');
    div_container.className='todos_container';
    const ul=document.createElement('ul');
    ul.className='totoList';
    todos.forEach(function(item, index){
        const li=document.createElement('li');
        const span=document.createElement('span');
        const delBtn=document.createElement('button');
        delBtn.className="delBtn";
        delBtn.textContent='刪除';
         // 按下按鈕時刪除對應的 item
        delBtn.onclick = () => {
            todos = todos.filter((_, i) => i !== index); // 移除該項
            render(); // 重新渲染
  ...