We Keep Coding

Simple Javascript front-end message board design

I am working on a personal blog website project, and I wanted to implement a simple message board on my index page. Due to the projected site traffic (relatively low) I decided on only using a front-end implementation without linking to a database with the following js and html code:
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<textarea class="message" type="text"></textarea><br/>
<input value="submit" type="button" class="submit-btn">
<div class="display-area">
Existing comment:
</div>
</section>
and then the js,
<script>
window.onload=function() {
var displayArea = document.getElementsByClassName("display-area");
var btn = document.getElementsByClassName("submit-btn");
btn.onclick = function() {
var comment = document.getElementsByClassName("message").value;
displayArea.appendChild(comment);
};
}
</script>
My intention was to make my display-area contain whatever was put in textarea via .appendChild when submit is clicked. Sadly, it isn't working as intended-nothing actually happens. I am thinking about potential errors in my js code, but just couldn't figure out anything that would resolve the problem.
Any assistance will be greatly appreciated!!!

getElementsByClassName() returns a collection of elements (note the s in Elements). If you have only one element that matches the class name, you have this element in the first index of the array-like collection.
var displayArea = document.getElementsByClassName("display-area")[0];
var btn = document.getElementsByClassName("submit-btn")[0];
You can also use querySelector(), that uses CSS selectors (like jQuery) and returns a single element:
var displayArea = document.querySelector(".display-area");
In order to append a text node (your variable comment stores a string), use append() instead of appendChild():
displayArea.append(comment);

Two ways this can be done are by calling the JavaScript function on click, or by calling it on form submission.
1) call function onclick:
Wrap your form within a form tag, and call your JavaScript function based on the element Ids.
Note the showInput function is being called onclick when the button is clicked.
function showInput() {
console.log('showInput called...')
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
display.innerHTML = userInput;
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form>
<textarea class="message" type="text" id="userInput"></textarea><br/>
</form>
<input type="submit" onclick="showInput();">
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
Here's a jsfiddle, with the same code as above: http://jsfiddle.net/ethanryan/94kvj0sc/
Note the JavaScript in the jsfiddle is being called at the bottom of the Head section of the HTML.
2) call function on form submit:
You can also do this by calling the JavaScript function on the submission of the form, instead of on the click of the button. However, since this form uses a textarea, hitting return will add a line break to the text, and not submit the form, so the button still needs to be clicked for the function to be called.
function showInput() {
console.log('showInput called...')
event.preventDefault()
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
display.innerHTML = userInput;
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form onsubmit="showInput()">
<textarea class="message" type="text" id="userInput"></textarea><br/>
<input type="submit" value="Submit">
</form>
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
Note the event.preventDefault() in the form, since the default behavior of forms is to submit data to a backend database.
jsfiddle: http://jsfiddle.net/ethanryan/qpufd469/
3. appending instead of replacing text
Finally, my examples above used innerHTML to replace the userInput text. If you want to append instead of replace the text, you can use insertAdjacentHTML to add the text to the end, and then append a linebreak to it. Finally, you can reset the form.
function showInput() {
console.log('showInput called...')
event.preventDefault()
var userInput = document.getElementById("userInput").value;
var display = document.getElementById("display");
var theForm = document.getElementById("theForm");
var linebreak = document.createElement("br");
display.insertAdjacentHTML('beforeend', userInput);
display.appendChild(linebreak);
theForm.reset();
}
<section class="message-board">
<div class="title">
<h2>
Leave a message
</h2>
</div>
<form onsubmit="showInput()" id="theForm">
<textarea class="message" type="text" id="userInput"></textarea><br/>
<input type="submit" value="Submit">
</form>
<div class="display-area">
Existing comment:
</div>
<p><span id="display"></span></p>
</section>
jsfiddle: http://jsfiddle.net/ethanryan/x4hq0Lzp/

Move input between divs

Trying to move user input from one div to another via a move button, back and forth. Even if there is multiple inputs one can move selected input from one to the other.
So far it moves all inputs in "field1" to "field2". Im trying to move only a single line back and forth.
Tried various stuff, still learning this. Any pointers on what i need to look at in order to achieve this?`
Any help appreciated.
var number = [];
function myNotes() {
var x = document.getElementById("field1");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<input type="button" value="move" onclick="move();"/><br/>');
}
function move() {
$('#field1').appendTo('#field2')
}
form {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="input" type=text>
</form>
<input type=submit onclick="myNotes();" value="Send">
<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1"></div>
<h2>Field 2</h2>
<div id="field2"></div>
JSFIDDLE

You've got a mixture of javascript and jQuery going that's kind of hard to understand. I've whipped up an example of this using jQuery, since you seem to have it in your project anyway:
https://jsfiddle.net/j5mvq6L5/7/
HTML:
<form>
<input id="input" type=text>
</form>
<input type=submit id="btnSend" value="Send">
<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1" class="field"></div>
<h2>Field 2</h2>
<div id="field2" class="field"></div>
JS:
//listen for document ready
$(document).ready(function() {
//button click listener:
$("#btnSend").on("click", function(e) {
var $field1 = $("#field1"); //works like getElementById
//create a containing div for later
var $entry = $("<div></div>").addClass("entry");
//create a new button
var $btnMove = $("<input/>").attr("type", "button").attr("value", "move").addClass("btnMove");
//click listener for the new button
$btnMove.click(function(){
//find "sibling" field (I added a class to both), append this button's parent div
$(this).parents(".field").siblings(".field").append($(this).parent());
});
//append entry parts
$entry.append($("#input").val())
.append($btnMove);
//append entry to #field1
$field1.append($entry);
});
});
CSS:
form {
display: inline;
}
.btnMove {
margin-left: .5em;
}

Add a specific number of input fields

I'm sure this is a simple mistake on my end but I cannot figure it out. I want users to be able to enter a number in a form field, click a button, then that many fields will be created. Here is my HTML and JavaScript so far. The removeChild works but it will not add fields:
<body>
<script language="javascript">
function addFields(){
var numFields = document.getElementById("numParts").value;
var theContainer = document.getElementById("partsList");
//document.write(numFields);
while (theContainer.hasChildNodes()) {
theContainer.removeChild(theContainer.lastChild);
}
for(i=0;i<numFields;i++){
var input = document.createElement("input");
input.type = "text";
input.name = "participant" + i;
theContainer.appendChild("input");
theContainer.appendChild(document.createElement("br"));
}
}
</script>
<form name="enterFields">
<input type="text" id="numParts" />
<input type="button" value="Add" onClick="addFields();" />
<div id="partsList">
<input type="text" />
</div>
</form>
</body>

The problem is that when you try to add the input with appendChild you are specifying a string, when you should be passing the actual element.
This is what you want (note the lack of quotes):
theContainer.appendChild(input);
Here is a working example

Input text value into a div?

Say I have this text box:
<input type="text" id="myText" placeholder="Enter Name Here">
Upon pressing a button, I would like to send the value entered into this div:
<div id="text2"></div>
I'm not entirely sure how to do this. Do I create a function and call it to the div? How would I do that?
Could someone clear this up for me? Thanks.

Add an onclick to your button:
<input type="button" id="somebutton" onclick="addText()">
Then write the javascript:
function addText()
{
document.getElementById('text2').innerHTML = document.getElementById('myText').value;
}

Solution using onclick event:
<input type="text" id="myText" placeholder="Enter Name Here">
<div id="text2"></div>
<button id="copyName" onclick="document.querySelector('#text2').innerHTML = document.querySelector('#myText').value" value="Copy Name"></button>
JSFiddle: http://jsfiddle.net/3kjqfh6x/1/

You can manipulate the content inside the div from javascript code. Your button should trigger a function (using the onclick event), which would access the specific div within the DOM (using the getElementById function) and change its contents.
Basically, you'd want to do the following:
<!DOCTYPE html>
<html>
<script>
function changeContent() {
document.getElementById("myDiv").innerHTML = "Hi there!";
}
</script>
<body>
<div id="myDiv"></div>
<button type="button" onclick="changeContent()">click me</button>
</body>
</html>

Mark D,
You need to include javascript to handle the button click, and in the function that the button calls, you should send the value into the div. You can call $("#myText").val() to get the text of the text box, and $("#txtDiv").text(txtToAppend) to append it to the div. Please look at the following code snippet for an example.
function submitTxt() {
$("#txtDiv").text($("#myText").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myText" placeholder="Enter Name Here">
<button onclick = "submitTxt()"> Submit </button>
<div id="txtDiv"> </div>

HTML could be:
<input type='text' id='myText' placeholder='Enter Name Here' />
<input type='button' id='btn' value='click here' />
<div id='text2'></div>
JavaScript should be external:
//<![CDATA[
var pre = onload; // previous onload? - window can only have one onload property using this style of Event delegation
onload = function(){
if(pre)pre();
var doc = document, bod = doc.body;
function E(e){
return doc.getElementById(e);
}
var text2 = E('text2'); // example of Element stored in variable
E('btn').onclick = function(){
text2.innerHTML = E('myText').value;
}
}
//]]>

I would recommend using a library like jQuery to do this. It would simplify the event handling and dom manipulation. None the less, I will include vanilla JS and jQuery examples.
Assuming the HTML in the body looks like this:
<form>
<input id="myText" type="text" placeholder="Enter Name Here">
<br>
<input type="submit" id="myButton">
</form>
<div id="text2"></div>
The Vanilla JS example:
//Get reference to button
var myButton = document.getElementById('myButton');
//listen for click event and handle click with callback
myButton.addEventListener('click', function(e){
e.preventDefault(); //stop page request
//grab div and input reference
var myText = document.getElementById("myText");
var myDiv = document.getElementById("text2");
//set div with input text
myDiv.innerHTML = myText.value;
});
When possible avoid using inline onclick property, this can make your code more manageable in the long run.
This is the jQuery Version:
//Handles button click
$('#myButton').click(function(e){
e.preventDefault(); //stop page request
var myText = $('#myText').val(); //gets input value
$('#text2').html(myText); //sets div to input value
});
The jQuery example assumes that you have/are adding the library in a script tag.

Displaying textarea content on click of button

I am having a text area and a button.Like this :
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />
Now,what i want to do is that on click of the button that text to be displayed on the same page above this text area just like we do comment or answer a question on stackoverflow.
How this can be done ?Please help.

you can do this using javascript
add any tag before (generally div or span tag is used) textarea tag
<div id="adduserdata"></div>
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" onclick="showtext()" />
Javascript code would be
function showtext(){
var text = document.getElementById("txtarea");
var showarea = document.getElementById("adduserdata");
showarea.innerHTML=text.value;
}
here is working example

As what you want, thus appending to the <div> division element, I assume that you will accept this answer (as a summary to all the comments and answers above) :
<!-- This is the HTML Part -->
<div id="text"></div>
<textarea id="new"></textarea>
<input type="button" onclick="appendTextToDiv();" />
<script>
function appendTextToDiv(){document.getElementById("text").innerHTML = document.getElmentById("text").innerHTML + document.getElementById("new").value;}
</script>
This can let you simply append it to the text. Fiddle

This will do if using Jquery (and previously text will stay) :
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('p').text(text);
}
});
or like this:
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('<p></p>').text(text).insertBefore('textarea');
}
});
Fiddle