Append elements to text box in new line using HTML DOM - javascript

Suppose i have textbox :-
<input type="text" name="content" id="content"/>
And i am trying append text to this input box in the following manner:-
document.getElementById("content").value+= "A";
The output is something like:-
AAAA....
Each time, the text is getting appended in the same line, how can make the text to append each time to the new line? Like that of below.
A
A
A
.
.

Instead of an input type text, you can use a text area and then style it to look like a text box.
<textarea name="textarea_content" id="tx_content"></textarea>
document.getElementById("tx_content").value+= "A\n";
document.getElementById("tx_content").value+= "A\n";
JSFiddle: https://jsfiddle.net/sx7t3ykc/

The input textbox will support one single line. not multiple lines. that is it's behaviour. That's why your text is shown in a single line.
If you need multiple lines, then you need to use <textarea></textarea> element

input is used for a single line. Try using textarea.
Refer code below:
<textarea type="text" name="content" id="content">
</textarea>
and js will be like this:
document.getElementById("content").value+= "A\n";

I have made you an example that appends a new "A" char every 5 seconds. I use textarea instead of the input tag.
setInterval(appendNewChar, 5000)
function appendNewChar()
{
document.getElementById("myTextArea").value += "A\n";
}
<textarea id="myTextArea"></textarea>

As #GuyFromChennai said, you have to use tag instead of , also, writing '\n' will make the line break, I tried this:
<textarea name="content" id="content"></textarea>
for (let i=0; i<3; i++){
document.getElementById("content").value+= "A\n"";
}

Related

How to write a code inside <pre> tag without apply the code

I have two places, the first is,<textarea></textarea> and used to write the code.
The second is, <pre></pre> and used to display the code.
The problem is, when write a code in the text area to display it in the second place, the code is applied and displayed as HTML element not just code as I want.
The wrong behavior:
The correct behavior (What I want):
The code:
<textarea id="inputCode" cols="50" rows="10"></textarea><br/>
<pre id="outputCode"></pre>
Using innerText to set the value of the second textarea will add the textual value only, not the HTML.
<pre id="code"></pre>
document.getElementById("code").innerText = "<input type='text' />";
Will insert in to the pre tags,
<input type='text' />
Example
JSFiddle

How to output a variable in Javascript to a textarea in HTML?

I have got a variable in javascript called 'signature'
var signature;
//(Data is here)
document.write(signature)
In HTML, I have the following:
<div id="siggen">
<textarea id="content" cols="80" rows="10"></textarea>
What i want is when i click generate button the variable signature appers in text area. Can anyone help?
I think you need like:
var signature = "Hello";
function addVal(){
document.getElementById('content').value = signature
}
<div id="siggen">
<textarea id="content" cols="80" rows="10"></textarea>
<button id="btnClick" onclick="addVal()">Click</button>
You can use JQuery :
$("#content").val(signature)
See val-vs-text-for-textarea
Your question is not quite clear but I assume you want to do something like this.
First in your html add a textarea and a button with these properties. Use disabled only if you want to make the text area disabled.
<textarea disabled id="displaytext"></textarea>
<button onclick="buttonFunction()">Click !</button>
Now in your javascript file, write the buttonFunction() to display the value in signature variable in the text area.
var signature = "This is the content to display";
function buttonFunction() {
document.getElementById("displaytext").innerHTML = signature;
}
This is the result. The text will be displayed when you click the button.

Escape HTML tag in <textarea>

I have one <textarea> tag in my website where the user can put there HTML code and see its preview. My problem is when the user enter code below mention in my <textarea> my preview functionality getting fail :
<html>
<textarea>Some code to show</textarea>
</html>
So question is how can I escape this html code in my <textarea> tag as I know the problem is coming because </textarea> tag.
Any solution on this please.
Edit
Question is about using </textarea> within a textarea.
Problem visible here: http://jsfiddle.net/hrP6F/
EDIT: for your purpose this would do:
<textarea>
Outside Textarea
<textarea>Inside Textarea</textarea>
</textarea>
source: How can I embed a textarea inside of another textarea in HTML?
Or use contenteditable like someone already mentioned -> click
FIRST ANSWER: Im not sure I understand perfectly but still. You want to display the code inside text area somewhere else for instance?
You could do that on click like this (I reckon you are not statically putting nested text areas in html?):
HTML:
<textarea id="textarea" >Something code to show</textarea>
<button onclick="show()">show</button>
<div id="showArea"></div>
JS:
function show(){
var t = document.getElementById('textarea').value;
document.getElementById('showArea').innerHTML = t;
}
This is of course if what you want is to display html that is inside textarea. you could also put another textarea inside first one and it will work.
If you want the results to display dynamically you could use
<textarea id="textarea" onkeyup="show()">Something code to show</textarea>
This works even if you put your code (html and text area) inside text area - it displays it, I tested it
You can add a output div for preview purpose. Below is the jQuery script
HTML
<textarea placeholder="Enter your html"><b>test</b></textarea>
Run
<div class="op"></div>
JS
$('.run').click(function(){
$('.op').html($('textarea').val());
return false;
});
DEMO

How can we get a string value from js file to HTML? [duplicate]

This question already has answers here:
Append text to textarea with javascript
(3 answers)
Closed 8 years ago.
How can we pass a string from js file to HTML? Assume I have declared a string in privacy.js and I need to get in to my html text area.
I have imputed the script file:
<script type="text/javascript" src="js/privacy.js"></script>
I am assinging string value in to a div
document.getElementById("privacy_text").innerHTML = privacy_string;
I need the Sting value in text area
<textarea class="terms" readonly="readonly">
<div id="privacy_text"></div>
</textarea>
Don't embed a div in a textarea and rather assign it it's own id:
<textarea id="privacy_textarea"></textarea>
And then try to assign a value to it:
document.getElementById("privacy_textarea").value = privacy_string;
Here is a working example.
You could as well use innerHTML but textarea is a form element so I'd recommend to use value.
Give your textarea an ID like, this
<textarea class="terms" readonly="readonly" id="theTextarea">
</textarea>
and then use the following JavaScript to select it and change the value:
document.getElementById("theTextarea").value = "theValue";
If you have access to jQuery, you can use:
$("#theTextarea").val("theValue");
Fiddle
Either way, a div can't go inside a textarea.
If you can assign an ID to your textarea...
<textarea id="myTextArea"></textarea>
Then this should work:
document.getElementById("myTextArea").value = privacy_string;
Give that textarea an ID , then set value to text area like document.getElementById('your text area id').value=privacy_text; from javascript file.
eg:
<script>
var privacy_text="your string";
document.getElementById(textId).value=privacy_text;
</script>
<textarea id="textId"></textarea>
Try this:
document.querySelector(".terms").value = 'someValue';
You can find HTML elements from javascript using document.querySelector by using different type of "query filters" in the above example it is finding the text area by CSS class using .cssClass.
Regarding the div inside your textarea object please note that is not possible. You can only non-HTML text.
<html>
<head>
<script type="text/javascript">
function printValue()
{
var name="Anand";
document.getElementById("textbox1").innerHTML=name;
}
</script>
</head>
<body>
<input type="text" id="textbox1"/>
<input type="button" value="GetText" onclick="PrintValue()"/>
</body>
</html>
Instead of .innerHtml, use this:
document.getElementById("privacy_text").value= "Hello";

html label inserting newline

I'm trying to set some text to a label dynamically using jQuery. But i can't get the <br> or \n to render and give me new lines. It all shows up on the same line and wraps.
here is my code On JsFiddle
My html:
<label id="myLabel" />
My Javascript:
$("#myLabel").text("This is my first line \n This should be my second line.");
text() will escape any html code, so instead use html()
$("#myLabel").html("This is my first line <br /> This should be my second line.");
The problem is that .text() will ignore your html. You should use .html(), soy u can put whatever html you want inside an element. So you'd have:
$('#myLabel').html('This is my first line <br/> This should be my second line.');
Hope this helps. Cheers
Try this instead:
$('#myLabel')
.html('this is my first line<br/>This should be my second line.');

Categories