使用一个按钮创建两个div
使用一个按钮创建两个div
提问于 2017-12-11 20:48:04
我正在创建一个简单的备注编辑器，它有两个div，一个标题和一个正文。我试图通过创建两个带有按钮的div来添加一个新注释。这样，当您单击该按钮时，将通过localStorage创建带有附加文本的新div。当我单击该按钮时，没有添加任何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;
}回答 3
Stack Overflow用户
发布于 2017-12-11 21:00:56
缺少将创建的元素附加到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>问候
Stack Overflow用户
发布于 2017-12-11 21:07:37
你的代码中有很多问题。
设置localStorage的正确方法是通过localStorage.setItem(key, val)
- You需要将
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);
}Stack Overflow用户
发布于 2017-12-11 21:34:04
您可以使用onload函数加载数据并在单击AddNote按钮时更新到本地存储，而不是使用onload函数。
按如下方式修改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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47753357
复制相关文章
相似问题
腾讯云开发者
