Question

我正在创建一个简单的笔记编辑器，它有两个div，一个标题和一个正文。我试图通过用按钮创建两个div来添加新音符。这样，当您单击按钮时，将创建新的div，并通过localStorage将文本附加到其中。当我单击按钮时，没有添加任何div。这是html

<div id ="heading" contenteditable="true">
</div>
<div id="content" contenteditable="true">

</div>
<button type="button" onclick="addNote()" name="button">Add new Note</button>

这是js

document.getElementById("heading").innerHTML = localStorage['title'] || 'Heading goes here';
document.getElementById('content').innerHTML = localStorage['text'] || 'Body of text editor';

setInterval(function () {
localStorage['title'] = document.getElementById('heading').innerHTML;
localStorage['text'] = document.getElementById('content').innerHTML;

}, 1000);

function addNote() {
  const heading = document.createElement('div');
  const content = document.createElement('div');
  heading.id = "heading";
  content.id = "content";

localStorage['title'] = document.getElementById('heading').innerHTML;
localStorage['text'] = document.getElementById('content').innerHTML;

}

Answer 1

缺少将创建的元素附加到dom（https://www.w3schools.com/jsref/met_node_appendchild.asp）：

function addNote() {
  var heading = document.createElement('div');
  var content = document.createElement('div');
  heading.id = "heading";
  content.id = "content";
  document.getElementById("myDivs").appendChild(heading);
  document.getElementById("myDivs").appendChild(content);
}

，您需要一个ID为myDivs

的div

<div id="myDivs"></div>
<button type="button" onclick="addNote()" name="button">Add new Note</button>

问候

Answer 2

您的代码中存在许多问题。

设置localStorage的正确方法是通过localStorage.setItem(key, val)
您需要在DIVs页面的某处附加HTML。
您还需要妥善处理setTimeout。

请在下面找到解决方案

HTML

<button type="button" onclick="addNote()" name="button">Add new Note</button>

的JavaScript

var intervalObj = null;
function addNote() {
  if(intervalObj) {
    clearInterval(intervalObj)
  }
  const heading = document.createElement('div');
  heading.setAttribute('contenteditable', true)
  heading.id = "heading";
  const content = document.createElement('div');
  content.setAttribute('contenteditable', true)
  content.id = "content";
  heading.innerHTML = window.localStorage.getItem('title') || 'Heading goes here';
  content.innerHTML = window.localStorage.getItem('text') || 'Body of text editor';
  document.getElementsByTagName("body")[0].append(heading);
  document.getElementsByTagName("body")[0].append(content);
  intervalObj = setInterval(function () {
    localStorage.setItem('title', document.getElementById('heading').innerHTML);
    localStorage.setItem('text', document.getElementById('content').innerHTML);
  }, 1000);
}

Answer 3

您可以使用onload函数加载数据，而不是使用setInterval函数，只要单击AddNote按钮，就可以更新到本地存储。

修改html如下：

<body onload="load()">
    <div id ="heading" contenteditable="true">
  </div>
  <div id="content" contenteditable="true">

  </div>
  <button type="button" onclick="addNote()" name="button">Add new Note</button>
</body>

您还可以按如下方式修改JS文件

function load() {
  var headingText = localStorage['title'] || 'Heading goes here';
  var bodyText = localStorage['text'] || 'Body of text editor';
  document.getElementById("heading").innerHTML = headingText;
  document.getElementById('content').innerHTML = bodyText;
}
function addNote() {


localStorage['title'] = document.getElementById('heading').innerHTML;
localStorage['text'] = document.getElementById('content').innerHTML;

}

使用按钮创建两个div

3 个答案: