Question

我需要写一个要求用户输入任务的页面，以及他希望任务有的颜色...尝试了一些代码，但我会告诉你我的最后一次尝试，问题是所有任务的颜色都会使用新值更新，或者根本不应用给定的颜色。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Canvas Example</title>
    <script type="text/javascript">



    function set(){
    var cont = document.getElementById("todo").value;
    var color = document.getElementById("bg").value;
    localStorage.setItem("task", cont);
    localStorage.setItem("preferences-bgcolor", color);
    //alert(localStorage.getItem('preferences-bgcolor'));
    showDiv();
    }

    </script>
  </head>
  <body id="b">


    <label>ADD A TASK TO YOUR TO DO LIST:</label>
    </br>
    Task:<input type="text" name="task" id="todo"><br>
    Color:<input type="text" list="list" id="bg">
        <datalist id="list">
            <option value="White">
            <option value="Green">
            <option value="Blue">
        </datalist>
    <input type="submit" value="Send" onclick="set()">

    <div id="content">


    </div>


  </body>
  <script type="text/javascript">


  function showDiv(){

  document.getElementById("content").innerHTML+="<p style='localStorage.getItem('preferences-bgcolor')'>"+localStorage.getItem('task')+"</p></br>";
  //document.getElementById("content").style.color = localStorage.getItem('preferences-bgcolor');

  }
  </script>
</html>

Answer 1

将style='localStorage.getItem('preferences-bgcolor')'更改为

"<p style='" + localStorage.getItem('preferences-bgcolor') + "'>"

待办事项列出使用本地存储的html页面

1 个答案: