Question

我一直在尝试建立一个简单的网站（在本地，我打算将其用作个人工具），在这里我可以有组织地输入文本并在合适的地方进行编辑。为了组织类别，我想包括一个功能，通过单击按钮，可以添加一个全新的文本字段（此处使用分隔符，以便根据内容自动调整大小）。事实证明，这比我想象的要更具挑战性。

P.S。我一点都不专业。我是一个完全的业余爱好者，大概做错了一半。

我们将不胜感激！下面列出的代码：

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>

Answer 1

您需要将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 />

Answer 2

您需要从AMPLIFYER函数内部删除CREATION函数，然后编辑和完成按钮才能工作，如下面的代码片段所示。让我知道这是否回答了您的问题。

<html>

<head>

	<title>Welcome to FELRYN</title>

	<style>

	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;
	}

	</style>

</head>

<body>

	<script>

		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() {
		   			
			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);
		
		}

	</script>

	<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>

在其他函数中调用时，Javascript函数不起作用

2 个答案: