Javascript function when called in another function doesnt work

Question

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>

You do realize you've declared the function CREATION twice, don't you? Is there a reason you've done that? — random_user_name
– random_user_name, Commented Jun 25, 2018 at 19:12
FYI, nice job indenting your code. Much easier to read. As a matter of code style, typically functions in javascript are spelled as editThis as opposed to all uppercase: EDITHIS. All uppercase is often used to denote a "constant" ( a value / variable that cannot / should not ever change value) — random_user_name
– random_user_name, Commented Jun 25, 2018 at 19:14
My answer is updated and fully functionional now sorry got sidetracked with some other projects — Scath
– Scath, Commented Jun 25, 2018 at 20:16
Yes I realized I made the function twice after I posted it lol. And I know about the names being in a helloWorld format but for readability almost all id names and whatnot are all caps so I can see them. Thanks for the input though! — Blinky Person
– Blinky Person, Commented Jun 25, 2018 at 20:23

Scath · Accepted Answer · 2018-06-25 20:50:41Z

1

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

edited Jun 25, 2018 at 20:50

answered Jun 25, 2018 at 19:13

Scath

3,81710 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Blinky Person Over a year ago

Out of curiosity, I noticed you used 'var count' in the 'function AMPLIFYER' as 'count++;'. What does 'count++' do? (I actually think this might have solved my problem, I just need to understand what you did.)

Blinky Person Over a year ago

Also, I would like the Create New Field buttons to appear under the newly created field if that's possible. Thank you so much for your answer!

Scath Over a year ago

count++ is the same as saying count = count + 1 just increments one so that you have unique ids that will allow the edit and done buttons to know which div to go after

Scath Over a year ago

It now moves the multiply button

Blinky Person Over a year ago

It seems to work well on Stack Overflow's, built in editor, but doesn't work on my computer. For Clarification, the Create New Field button doesn't work(Just on computer though). Again, thank you for your answer!

|

user9721529 · Accepted Answer · 2018-06-25 19:16:33Z

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>

Yes I understand I made that mistake, but even without the CREATION function in the AMPLIFYER function, the code works the same as in not functional. Thanks for your input though!

Collectives™ on Stack Overflow

Javascript function when called in another function doesnt work

2 Answers 2

8 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related