Append text to div from textarea
Question
I am trying to make a simple editor where the user can enter text and upon hitting the edit button it will append that text to the end of the id="textArea" . Nothing happens when I hit the edit button after entering text in the textarea.
If someone could point out what I'm doing wrong or a better way to do this I'd appreciate it, I have seen other ways of doing it but I'm just not sure why this way isn't working. Thanks.
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
function edit(){
var editorText = document.getElementById("editor").value;
$("#textArea")append("editorText");
}
</script>
</head>
<body>
<div>
<form>
Text Editor
<br/>
<textarea id="editor">
</textarea>
<br/>
<input type="submit" value="Edit" onclick="edit()">
</form>
</div>
<br>
<div id="textArea">
<h2><a name="year1"></a>Document</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet nisl velit, at elementum enim blandit in. Suspendisse sit amet posuere ex. Donec sit amet commodo nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vitae tincidunt metus. Suspendisse ex ligula, placerat convallis varius in, placerat et ipsum. Pellentesque et neque nec nisl consectetur fringilla ut tristique ligula. Aliquam in sem turpis.
</p>
</div>
</body>
</html>
EDIT: After following some of the suggestions, I still had no luck. Here is the new code I am trying to use.
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
function edit(){
$("#editor").append("editorText");
}
</script>
</head>
<body>
<div>
<form>
Text Editor
<br/>
<textarea id="editor">
</textarea>
<br/>
<input type="button" value="Edit" onclick="edit()">
</form>
</div>
<br>
<div id="textArea">
<h2><a name="year1"></a>Document</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse laoreet nisl velit, at elementum enim blandit in. Suspendisse sit amet posuere ex. Donec sit amet commodo nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam vitae tincidunt metus. Suspendisse ex ligula, placerat convallis varius in, placerat et ipsum. Pellentesque et neque nec nisl consectetur fringilla ut tristique ligula. Aliquam in sem turpis.
</p>
</div>
</body>
</html>
3 answers
solution1
0 2016-04-23 20:04:16
You're trying to append the string "editorText" instead of the variable and you missed one .
You should do:
$("#textArea").append(editorText);
solution2
0 2016-04-23 20:04:25
change your button and edit function as below
<input type="button" value="Edit" onclick="edit()">
function edit(){
$("#editor").append("editorText");
}
solution3
0 2016-04-24 00:05:04
You can't append the text content of the textarea to a element. Instead of doing that, try this:
$('input[type="submit"]').click(function(){
$('#textArea').text($('#editor').val());
});
That is jQuery. When you click the submit button, what will happen is the text content of the id="textArea" would be the text content of the #editor . You can change the text() to html() if you ever want to render the elements that are typed in the #editor like <p>This is a paragraph</p> .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.