如何将文本保存到本地存储，并访问它并将其附加到链接网页上的OL

我想从index.html上的输入中捕获文本，并将其保存到本地存储中
在index2.html上，我想从本地存储中获取项目，创建一个新的li，并将其附加到空的OL中

我当前拥有的代码总是给我一个错误"；未捕获的类型错误：无法读取null的属性"appendChild"。

所以我猜它无法访问我的OL(这是有序变量(。

我是新手，我正在尝试创建一个用于练习的笔记应用程序，那么我做错了什么？

let notes = document.querySelector("#note");
let submit = document.querySelector(".submit-btn");
let view = document.querySelector(".view-btn");
let ordered = document.querySelector("#notes-list");
let form = document.querySelector("form");

submit.addEventListener("click", (e) => {
    e.preventDefault();
    
    localStorage.setItem("note", notes.value);
    let newLI = document.createElement("li");
    newLI.innerHTML = localStorage.getItem("note");
    ordered.appendChild(newLI);
    notes.value = "";
});

我不知道该告诉你什么。下面的代码似乎有效。也许你可以仔细检查一下你的代码？

我不得不删除localStorage代码，因为这在Stackoverflow上不起作用。

let notes = document.querySelector("#note");
let submit = document.querySelector(".submit-btn");
let ordered = document.querySelector("#notes-list");
submit.addEventListener("click", (e) => {
    e.preventDefault();
    
    let newLI = document.createElement("li");
    newLI.innerHTML = notes.value;
    ordered.appendChild(newLI);
    notes.value = "";
});

<ol id="notes-list"></ol>
<form id="my-form">
  <input type="text" id="note" onfocus="this.select()" />
  <button type="submit" form="my-form" class="submit-btn">Submit</button>
</form>

因为这样做通常很好，所以需要考虑的是创建一个inti方法，然后用window.addEventListener('load', methodName)激活，或者像我在下面的例子中对body标记所做的那样。然而，我看不出这与你已经做的有什么不同。

var notes, submit, ordered;
function initVariables() {
  notes = document.querySelector("#note");
  submit = document.querySelector(".submit-btn");
  ordered = document.querySelector("#notes-list");
  submit.addEventListener("click", addToList);
}
function addToList(e) {
  e.preventDefault();
  let newLI = document.createElement("li");
  newLI.innerHTML = notes.value;
  ordered.appendChild(newLI);
  notes.value = "";
}

<body onload="initVariables()">
  <ol id="notes-list"></ol>
  <form id="my-form">
    <input type="text" id="note" onfocus="this.select()" />
    <button type="submit" form="my-form" class="submit-btn">Submit</button>
  </form>
</body>

我为任何一个来找我的新手都想好了。

我想我可以在index.html和index2.html上都使用app.js……但它不起作用。

每个索引都需要自己的js文件。

这就是我所做的。

在app.js for index.html上，我让它捕获注释，并通过单击事件将其设置为localstorage。

然后在index2.html上，我只是直接将js添加到文件中(我想我本可以创建app2.js，但不需要它(。但我所做的只是让这个js从本地存储中获取密钥，创建一个新的Li并将其附加到我的OL中。现在它运行得很好。

相关内容

最新更新

热门标签：