CODEWITHSUNDEEP
javascripthtmlcss
Blinky Person
Blinky Person

Reputation: 23

Javascript function when called in another function doesnt work

I have been trying to make a simple website (locally, I plan to use this as a personal tool) where I can input text in an organized way and edit where I see fit. To organize the categories, I wanted to include a feature where I could add a whole new text field (Here I use dividers for the sake of auto resize based on content) by the click of a button. This proved a bit more challenging than I thought.

P.S. I am not professional at all. I am a complete amateur and have probably done half the stuff wrong.

Help would really be appreciated! Code listed below: 

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>

Upvotes: 2

Views: 94

Answers (2)

Scath
Scath

Reputation: 3824

You need to change element_name to element_text and it will add the new fields. Or pass that variable to creation if you want to use name. You will need to add a counter to keep track the new editable divs unique ids as well. This is a fully functioning answer. 

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 />

Upvotes: 1

user9721529
user9721529

Reputation:

You need to remove the CREATION function from inside AMPLIFYER function and then the edit and done buttons work as you can see in the code snippet below. Let me know if this answers your question.

<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>

Upvotes: 1

Related Questions