Q4.html

<html>
  <head>
    <title>實作：To-Do List（Q4：變色）</title>
    <style>
    div{
      margin-top: 50px;
      text-align: center;
    }


    </style>
    <script>
      "use strict";
      function createToDo(){
        //to do html標籤
        var todo = document.createElement("div");
        var span = document.createElement("span");

        // 新建 to do 功能
        var input = document.getElementById("input").value;
        if (input == ""){
          input = "沒指定工作";
        }
        span.innerHTML = input;
        todo.appendChild(span);

        //replace 按鈕設計
        var replaceButton = document.createElement("button");
        replaceButton.onclick = function(){
          var input = document.getElementById("input").value;
          if (input == ""){
            alert("不能空白");
            return;
          }
          this.parentNode.firstChild.innerHTML = input;
          document.getElementById("input").value = "";
        }
        replaceButton.textContent = "R";
        todo.appendChild(replaceButton);

        //remove 按鈕設計
        var removeButton = document.createElement("button");
        removeButton.onclick = function(){
          var answer = confirm("是否已完成？");
          if (answer == true){
            this.parentNode.style.color = "blue";
            this.parentNode.removeChild(replaceButton);
            this.parentNode.removeChild(this);
          }
        }
        removeButton.textContent = "V";
        todo.appendChild(removeButton);

        //所有按鈕與功能加入 todolist
        document.getElementById("todolist").appendChild(todo);
        document.getElementById("input").value = "";


    }
    </script>


  </head>
  <body>
    <div>
      <h1>To Do List</h1>
      <input type="text" id="input">
      <button onclick="createToDo()"> + </button>

      <div id="todolist">
      </div>
    </div>
  </body>

</html>