本地存储返回 [object HTML_InputElement] 而不是值

Question

我想做一个笔记应用程序。当我在一页（新的note.html）上写下注释的文本和标题并通过本地存储将其显示在主页（index.html）上时，主页似乎没有检测到要显示的本地存储文本它，所以出现这些错误：[object HTMLInputElement] 和 [object HTMLTextAreaElement]。

当在“new note.html”字段中未输入任何内容时，主页上会显示以下文本：“没有任何注释”，但如果在标题和写入字段中输入任何内容，则输入的文本为应该显示在主页 (index.html) 上，当单击绿色箭头样式的按钮时，使用 savetitle() 和 savewrite() 函数，但显示 [object HTMLInputElement] 和 [object HTMLTextAreaElement]。

“new note.html”页面的代码：

<body>
    <div class="flex">
        <a onclick="savetitle(), savewrite()" class="back" href="./index.html">
            <i class="fa-solid fa-chevron-left fa-lg" style="color: #00e927;"></i></a>
        <input class="title" id="title" type="text" spellcheck="false" maxlength="15" placeholder="Title">
    </div>
    <div class="line"></div>
    <textarea class="write" id="write" rows="30" spellcheck="false" placeholder="Write here..."></textarea>
<script>
    function savetitle() {
        var title = document.getElementById("title");

        if (title !== "") {
            localStorage.setItem("title", title)
        }
    }
    function savewrite() {
        var write = document.getElementById("write");

        if (write !== "") {
            localStorage.setItem("write", write);
        }
    }

“index.html”页面的代码：

<body>
      <div class="notes"><h1>Notes</h1></div>
      <div class="line"></div>
      <div id="titled"></div>
      <div id="written"></div>
      <a class="new" href="./new note.html">
        <i class="fa-regular fa-pen-to-square fa-x18" style="color: #00e927;"></i></a>
<script>
  var titled = localStorage.getItem("title");

  if (titled) {
    document.getElementById("titled").textContent = titled;
  } else {
    document.getElementById("titled").textContent = "There isn't any notes"
  } 

  var written = localStorage.getItem("write");

  if (written) {
    document.getElementById("written").textContent = written;
  }

Answer 1

简单易行

问题是您使用的`document.getElementById("title")`末尾没有`.value`，如下所示：`document.getElementById("title").value`

这是完整的 newNote.html ：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>New Note</title>
</head>

<body>
    <div class="flex">
        <input class="title" id="title" type="text" spellcheck="false" maxlength="15" placeholder="Title">
    </div>
    <div class="line"></div>
    <textarea class="write" id="write" rows="`0" spellcheck="false" placeholder="Write here..."></textarea>
    <br>
    <button onclick="saveCompleteNote()">Save Complete Note</button>
    <script>

        function saveCompleteNote() {
            savetitle();
            savewrite();
        }

        function savetitle() {
            var title = document.getElementById("title").value;
            console.log(title);

            if (title !== "") {
                localStorage.setItem("title", title)
            }
        }
        function savewrite() {
            var write = document.getElementById("write").value;
            console.log(write)

            if (write !== "") {
                localStorage.setItem("write", write);
            }
        }
    </script>
</body>

</html>

本地存储返回 [object HTML_InputElement] 而不是值

问题描述投票：0回答：1

“new note.html”页面的代码：

“index.html”页面的代码：

1个回答

简单易行

最新问题

本地存储返回 [object HTML_InputElement] 而不是值

问题描述 投票：0回答：1

“new note.html”页面的代码：

“index.html”页面的代码：

1个回答

简单易行

最新问题

问题描述投票：0回答：1