我一直在尝试制作一个简单的网站(在本地，我计划将其用作个人工具)，我可以在其中以有组织的方式输入文本并在我认为合适的地方进行编辑。为了组织类别，我想包含一个功能，可以通过单击按钮添加一个全新的文本字段(这里我使用分隔符，以便根据内容自动调整大小)。事实证明这比我想象的更具挑战性。
附注我一点也不专业。我完全是个业余爱好者，可能做错了一半的事情。
非常感谢您的帮助!代码如下:
function EDITTHIS() {
document.getElementById('DESCRIPTION').contentEditable = 'true';
document.getElementById('DESCRIPTION').style = 'background:yellow';
}
function ENDTHIS() {
document.getElementById('DESCRIPTION').contentEditable = 'false';
document.getElementById('DESCRIPTION').style = 'background:palegreen';
}
function AMPLIFYER() {
function CREATION(element, element_id, element_text) {
var element_a = document.createElement(element);
element_a.setAttribute("id", element_id);
var element_text = document.createTextNode(elemet_name);
element_a.appendChild(element_text);
document.body.appendChild(element_a);
}
CREATION("DIV", "DIVTHAT", "Write Here.");
CREATION("BUTTON", "EDITTHAT", "EDIT");
CREATION("BUTTON", "DONETHAT", "DONE");
}
function CREATION(element, element_id, element_text) {
var element_a = document.createElement(element);
element_a.setAttribute("id", element_id);
var element_text = document.createTextNode(elemet_name);
element_a.appendChild(element_text);
document.body.appendChild(element_a);
}h1 {
background-color: green;
color: white;
font-size: 105px;
margin-top: 0px;
margin-bottom: 50px;
text-shadow: 0px 0px 5px #6de1ff;
vertical-align: middle;
line-height: 300px;
}
h2 {
background-color: none;
color: Black;
font-size: 45px;
margin-top: 50px;
margin-bottom: 0px;
text-shadow: 0px 0px 5px #6de1ff;
}
button {
background-color: palegreen;
border: solid green;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
div {
min-height: 30px;
width: 1140px;
padding: 50px 50px;
font-size: 26px;
}
body {
background-image: url("BG.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right bottom;
}<html>
<head>
<title>Welcome to FELRYN</title>
</head>
<body>
<center>
<h1>FELRYN</h1>
</center>
<h2>Description of World:</h2>
<div id="DESCRIPTION" contentEditable="false" style="background:palegreen">Write the description here.</div>
<br />
<button id="WANNAEDIT?" onclick="EDITTHIS()"> Edit</button>
<button id="DONEEDIT?" onclick="ENDTHIS()"> Done</button>
<br />
<br />
<br />
<button id="MULTIPLY!" onclick="AMPLIFYER()">Create New Feild.</button>
<br />
<br />
<br />
</body>
</html>最佳答案
您需要将 element_name 更改为 element_text，它将添加新字段。或者，如果您想使用名称，则将该变量传递给creation。
您还需要添加一个计数器来跟踪新的可编辑 div 的唯一 ID。这是一个功能齐全的答案。
var count = 1;
function AMPLIFYER() {
CREATION("DIV", "DIVTHAT", "Write Here.");
CREATION("BUTTON", "EDITTHAT", "EDIT");
CREATION("BUTTON", "DONETHAT", "DONE");
count++
moveAddBtn()
}
function CREATION(element, element_id, element_text) {
var element_a = document.createElement(element);
element_a.setAttribute("id", element_id + count);
if (element_text == "EDIT") {
element_a.setAttribute('onclick', "EDITTHIS(" + count + ")")
}
if (element_text == "DONE") {
element_a.setAttribute('onclick', "ENDTHIS(" + count + ")")
}
var element_text = document.createTextNode(element_text);
element_a.appendChild(element_text);
document.body.appendChild(element_a);
}
function moveAddBtn() {
var element = document.getElementById("MULTIPLY!");
element.parentNode.removeChild(element)
var linebreak = document.createElement("br");
document.body.appendChild(linebreak);
document.body.appendChild(element);
}
function EDITTHIS(x) {
let editDiv = document.getElementById('DIVTHAT' + x)
editDiv.contentEditable = 'true';
editDiv.style = 'background:yellow';
}
function ENDTHIS(x) {
let editDiv = document.getElementById('DIVTHAT' + x)
editDiv.contentEditable = 'false';
editDiv.style = 'background:palegreen';
}h1 {
background-color: green;
color: white;
font-size: 105px;
margin-top: 0px;
margin-bottom: 50px;
text-shadow: 0px 0px 5px #6de1ff;
vertical-align: middle;
line-height: 300px;
}
h2 {
background-color: none;
color: Black;
font-size: 45px;
margin-top: 50px;
margin-bottom: 0px;
text-shadow: 0px 0px 5px #6de1ff;
}
button {
background-color: palegreen;
border: solid green;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 20px;
}
div {
min-height: 30px;
width: 1140px;
padding: 50px 50px;
font-size: 26px;
}
body {
background-image: url("BG.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: right bottom;
}
<center>
<h1>FELRYN</h1>
</center>
<h2>Description of World:</h2>
<div id="DIVTHAT0" contentEditable="false" style="background:palegreen">Write the description here.</div>
<button id="WANNAEDIT?" class="pDiv" onclick="EDITTHIS(0); return false;"> Edit</button>
<button id="DONEEDIT?" onclick="ENDTHIS(0); return false;"> Done</button>
<br />
<br />
<br />
<button id="MULTIPLY!" onclick="AMPLIFYER()">Create New Feild.</button>
<br />
<br />
<br />关于Javascript 函数在另一个函数中调用时不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51030404/