Develop Reference

Why can't I get the text value from an input box?

So I was trying to get the text from the input box and set it as the header text. But I couldn't do it. I've been struggling with HTML DOM. Thank you.
document.getElementById('button').onclick = function(){
document.getElementById('header1').innerHTML = 'CHANGED';
}
document.getElementById('button2').onclick = function(){
document.getElementById('input').value = document.getElementById('header1').innerHTML;
}
<div>
<h1 id = 'header1'>HTML DOM</h1>
<button id = 'button'>Click</button>
<script src = 'app.js'></script>
</div>
<div>
<input type="text" id = 'input'>
<button id = 'button2'>OK</button>
</div>

You should change the function to this:
document.getElementById('button2').onclick = function(){
document.getElementById('header1').innerHTML = document.getElementById('input').value
};

If you want to use the text provided in the input and set it as the header then you need to reverse your statement
document.getElementById('header1').innerText = document.getElementById('input').value;
Btw. if your input should be treated as just text then use the property .innerText and not .innerHtml

You probably have interchanged assignment in your second function. Try this:
document.getElementById('button2').onclick = function(){
document.getElementById('header1').innerHTML = document.getElementById('input').value;

this should work too
document.getElementById('button2').onclick = function(){
document.getElementById('header1').innerText=document.getElementById('input').value

If I understood you, look at the my code snippet
//function on button2 click event
document.getElementById('button2').onclick = function(){
var input = document.getElementById('input').value;
document.getElementById('header1').innerHTML=input;
}
<p>From input to <b>header</b> on click button "OK"</p>
<div>
<h1 id = 'header1'>HTML DOM</h1>
</div>
<div>
<input type="text" id = 'input'>
<button id = 'button2'>OK</button>
</div>

Adding newline in HTML using Javascript

I'm trying add a newline after some text every time a button is pressed. Here is the part of HTML file concerning the question -
<input type="text" id="fname" name="fname">
<button type = "button" onclick = "prtText('fname')">SEND</button>
<p id="para"></p>
<script>
var node = document.createElement("P");
function prtText(addr)
{
var x = document.getElementById(addr).value;
var txt = x + '\n'
var textnode = document.createTextNode(txt);
node.appendChild(textnode);
document.getElementById("para").appendChild(node);
}
</script>
Now, when I run the HTML file, every time I press the button, the text on the input box should get printed with a newline. Like this-
ExampleText
ExampleText
But it gets printed something like this-
ExampleText ExampleText.
I have tried the other method like this - var txt = x + '<br/>', but it prints like this - ExampleText<br/>ExampleText<br/> and doesn't print a line break.
What do I do?

It's generally not a good idea to use inline event handlers. Here's a snippet that adds the input value to paragraph (p#para) and empties the input element on clicking button#sendBttn. The value is wrapped in a div, a block level element, meaning it will always start on a new 'line'. 1
1 You can also end a value string with <br>, but in that case you can not use a innerText, createTextNode or textContent.
document.addEventListener("click", printValue);
function printValue(evt) {
// only do stuff when the button was clicked
if (evt.target.id === "sendBttn") {
const inputEl = document.querySelector("input#fname");
const value = inputEl.value.trim();
// value may be empty
if (value) {
// create an block element
const newLine = document.createElement("div");
// fill with the value
newLine.textContent = "Sent: " + value;
// append it to the existing paragraph
document.querySelector("#para").appendChild(newLine);
// reset input value
inputEl.value = "";
// focus back to the input field
inputEl.focus();
}
}
}
body {
font: normal 12px/15px verdana, arial;
margin: 2rem;
}
#para div {
padding: 2px 3px;
border: 1px solid #eee;
max-width: 500px;
margin: 2px;
}
<input type="text" id="fname" name="fname">
<button type="button" id="sendBttn">SEND</button>
<p id="para"></p>

<input type="text" id="fname" name="fname">
<button type = "button" onclick = "prtText('fname')">SEND</button>
<p id="para"></p>
<script>
var node = document.createElement("P");
function prtText(addr)
{
var txt = '\n'+ document.getElementById(addr).value ;
document.getElementById("para").innerText+= txt;
}
</script>
Here you go. HTML elements have property innerText which allows you to edit contents of element. Beware that it will change inside elements if there are any.

That happens because new lines are transformed into spaces in HTML. For example:
<p>
This is a sentence. Sometimes sentences get too big to
fit inside a single line, so we break the line in two.
</p>
In the above example, the text node inside the <p> element, has a newline, but the rendered output doesn't break there.
Line breaks in HTML are made using the <br> element.
<p>
This sentence is in the first line.<br>
This one is in the second.
</p>
You could use document.createElement("br") and append the element between two text nodes to create two lines, but there's a simpler way, innerText.
const elem = document.getElementById("demo");
elem.innerText = "First line\nSecond line"
<p id="demo"></p>

Display <textarea> content in <div>

I'm really new to Javascript. I am trying to output the current date and also the content in the textarea tag in HTML on button click.
However I do not know how to obtain the content when the textarea is not declared along with a name/id/class.
Here's my code:
<script>
function displayPost() {
var thisDiv = document.getElementById("posts");
var date = new Date();
date.classList.add("post-time");
var textarea = document.getElementByTagName("textarea");
textarea.classList.add("post-content");
thisDiv.innerHTML = date + textarea;
}
</script>
<html>
<div id="posts"></div>
<textarea rows="4" cols="60">Type your text here...</textarea>
<button onclick = "displayPost()">Post</button>
</html>
Any sort of help is appreciated! Thank you in advance!

You can use document.querySelector when a dom element does have any name/id/class like:
var textarea = document.querySelector('textarea');
To get the current date in a readable format, you can use toLocaleString() method:
var date = new Date();
console.log(date.toLocaleString());
// → "3/21/2020, 7:00:00 PM"
To get <textarea> current entered value you can use:
var textarea = document.querySelector('textarea');
console.log(textarea.value);
DEMO:
function displayPost() {
var thisDiv = document.getElementById('posts');
var date = new Date();
thisDiv.classList.add("post-time");
var textarea = document.querySelector('textarea');
textarea.classList.add("post-content");
thisDiv.innerHTML = date.toLocaleString() + ': '+ textarea.value;
}
.post-time{padding:20px 0}
<div id="posts"></div>
<textarea rows="4" cols="60" placeholder="Type your text here..."></textarea>
<button onclick="displayPost()">Post</button>

you can make use of document.querySelector() which returns first matching element or document.getElementsByTagName() which returns NodeList of all the textarea elements
var textarea = document.querySelector('textarea').value;
or
var textarea = document.getElementsByTagName('textarea')[0].value;

appending User entered text using createTextNode method

Right now I am trying to figure out how to append CREATED text to a CREATED p element depending on what a user enters into an input text field.
If I set the text after the createTextElement method, it displays just fine when I click the button. BUT what I want is: the user enters text in the input field and then upon clicking the button, the text get's added to the end of the div tag with the id of "mydiv". Any help is appreciated.
HTML:
<body>
<div id="mydiv">
<p>Hi There</p>
<p>How are you?</p>
<p>
<input type="text" id="myresponse">
<br>
<input type="button" id="showresponse" value="Show Response">
</p>
<hr>
</div>
</body>
JAVASCRIPT:
var $ = function(id) {
return document.getElementById(id)
}
var feelings = function()
{
$("myresponse").focus();
var mypara = document.createElement("p");
var myparent = $("mydiv");
myparent.appendChild(mypara);
var myText = document.createTextNode($("myresponse").value);
mypara.setAttribute("id", "displayedresponse");
mypara.appendChild(myText);
$("displayedresponse").appendChild(myText);
}
window.onload = function() {
$("showresponse").onclick = feelings;
}

You need to apply an argument to createTextNode function
You need to read the value of the input field so you can see the text.
Since you will reference mydiv on every click, i think moving mydiv variable to parent scope will suit you better
var $ = function (id) {
return document.getElementById(id)
}
let mydiv = $('mydiv');
$("showresponse").addEventListener('click', feelings);
function feelings() {
let textInput = $('myresponse').value;
var mypara = document.createElement("p");
var myText = document.createTextNode(textInput);
mypara.setAttribute("id", "displayedresponse");
mypara.appendChild(myText);
mydiv.appendChild(mypara);
$("displayedresponse").appendChild(myText);
}

unable to create text area using javascript

I want to design a simple text area using javascript. I am using the following function
function add2(type) {
var element = document.createElement("input");
var label=prompt("Enter the name for lable","label");
document.getElementById('raj').innerHTML=document.getElementById('raj').innerHTML+label;
element.setAttribute("type", type);
element.setAttribute("name", type);
element.setAttribute("cols",20);
element.setAttribute("rows",50);
var rohit = document.getElementById("raj");
rohit.appendChild(element);
document.getElementById('raj').innerHTML=document.getElementById('raj').innerHTML+"<br/>";
}
I am using this function in my HTML code as follow :
<input type="button" value="Text Area" onclick="add2('textarea')">
But when I am executing this code, it is creating only a simple text box. what should I do ??
Thanks

Textarea's have their own HTML tag, I think that this is what you want:
Demo: http://jsfiddle.net/SO_AMK/ZzdWR/
HTML:
<input type="button" value="Text Area" onclick="add2('textarea')">
<div id="raj">Lorem ipsum...</div>
​JavaScript:
function add2(name) {
var element = document.createElement("textarea");
var label = prompt("Enter the name for lable","label");
var rohit = document.getElementById("raj");
rohit.innerHTML = rohit.innerHTML + label;
element.setAttribute("name", name);
element.setAttribute("cols",20);
element.setAttribute("rows",50);
rohit.appendChild(element);
rohit.innerHTML = rohit.innerHTML + "<br/>";
}​

Text areas are separate elements:
<textarea>content</textarea>
rather than
<input type="textarea" value="content" />