We Keep Coding

How to copy text and paste into a textarea using JS?

I am looking for a solution how to copy text and then paste a new text automatic in textarea. I found solutions, but based on jquery I'm looking for something simple on clean js.
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
let textarea = document.getElementById("select-this");
textarea.focus();
}
<div class="wrapper">
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br/><br/>
<textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>
I found some solutions, but I still do not know how to make the text automatically appear in textarea after pressing the button.

append the copied value to value of textarea everytime you run copyToClipboard
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
let textarea = document.getElementById("select-this");
textarea.focus();
textarea.value += document.getElementById(elementId).innerHTML
}
<div class="wrapper">
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br/><br/>
<textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>

ummm...You are REALLY over-complicating stuff...
Just use the following JS:
let textarea = document.getElementById("select-this");
textarea.focus();
function changeTextarea(elementId) {
textarea.innerHTML = document.body.querySelector(elementId).innerHTML;
}
and edit the HTML of the buttons as follows:
<button onclick="changeTextarea('#p1')">Copy P1</button>
<button onclick="changeTextarea('#p2')">Copy P2</button>
<button onclick="changeTextarea('#p3')">Copy P3</button>
You don't need to copy and then paste the values of the paragraphs to the <textarea>. Just change it using the innerHTML property...

I've a simple solution for that, just using the part of the code you have.
function copyToClipboard(elementId) {
var text = document.getElementById(elementId).innerHTML;
let textarea = document.getElementById("select-this");
textarea.innerHTML = text;
textarea.focus();
}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<p id="p3">P3: I am a 3 paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<button onclick="copyToClipboard('p3')">Copy P3</button>
<br><br>
<textarea id="select-this" value="I just copied this with only JavaScript"/></textarea>
</div>

How to get change in font size to show in ckeditor

So the code that I currently have is meant for a user to paste text into the ckeditor, and then when they click submit, it will identify certain characters and change their font sizes. This works when the text is shown outside of ckeditor when in a normal textarea, but the changes in font size are not shown inside the ckeditor. How can I get the ckeditor to recognize the change in fonts and font sizes? Here is my code:
<script src="//cdn.ckeditor.com/4.6.2/full/ckeditor.js"></script>
</head>
<body>
<form onsubmit="event.preventDefault(); filterTextArea();">
<div name="space" id="space"> </div>
<textarea name="editor1" id="editor1" rows="10" cols="80" > </textarea> <br>
<div id="formbox"> <button action="submit" id = "submit" >WORDIPLY</button> </div>
<script>
CKEDITOR.replace( 'editor1', {
customConfig: 'www.wordiply.weebly.com/files/theme/ckeditor.js'
});
</script>
</body>
<body>
<script>
function filterTextArea(){
editor = CKEDITOR.instances.editor1;
var edata = editor.getData();
//CHANGE FONT OF CHARACTERS
editor.setData(data);
}
var config = {};
config.placeholder = 'some value';
CKEDITOR.replace("myeditor" , config, {
});

I think you may be looking for the following addon:
http://ckeditor.com/addon/font

Setting the CSS of an html element with text entered by the user

My page has two textareas and a div. One textarea is for the user to enter html and the other is for entering css. When a button is clicked I will call a javascript function to display the css and html inside the div.
function handleLaunch() {
var div = document.getElementById('pane');
var html = document.getElementById('h');
var css = document.getElementById('c');
div.innerHTML = html.value;
// This line obviously doesn't work div.style = css.value;
}
<body>
<textarea id="c" placeholder="CSS code here..." rows="10" cols="50"></textarea>
<div id="pane">
</div>
<br>
<textarea id="h" placeholder="Html code here..." rows="10" cols="50"></textarea>
<br>
<button type="button" onclick="handleLaunch()">Launch</button>
Now, how to set the css to the text ?
EDIT: I should have mentioned that I want to be able to put something like
.classExample{text-align:center} in the css textarea and have it apply.

Yes, #adeneo answer works, this snippet shows it. Enter color: red; for example as CSS, and any text as HTML...
function handleLaunch() {
var div = document.getElementById('pane');
var html = document.getElementById('h');
var css = document.getElementById('c');
div.innerHTML = html.value;
div.style.cssText = css.value;
}
<body>
<textarea id="c" placeholder="CSS code here..." rows="10" cols="50"></textarea>
<div id="pane">
</div>
<br>
<textarea id="h" placeholder="Html code here..." rows="10" cols="50"></textarea>
<br>
<button type="button" onclick="handleLaunch()">Launch</button>

Assuming that you are defining css properties along with selectors, for example you css text is like
div{
background:red;
}
.someClass{
font-size:12px;
}
and your html looks like
<div>DIV content</div>
<span class="someClass"> Content in someClass</span>
You can add the html as div.innerHTML = html.value;
But for adding the css to your page you will have to do the following
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = document.getElementById('c').value;
document.getElementsByTagName('head')[0].appendChild(style)

How do I make a button that will print out more text every click?

I'm rather new to programming, but let's keep going. My goal is to create a button that when pressed it will print out text. If you press a second time, it will print out text below the original snippet and so on. Basically, if you keep clicking the button you'll get text repeated a number of times below each other. Currently I've achieved a button that when pressed it prints out text. Press it again and it does nothing. Here's the code I used:
<input type="button" value="Duplicate Text" onclick="dup()"/>
<p id="clone"></p>
<script>
function dup() {document.getElementById("clone").innerHTML="Text";}
</script>
I'm sure I've done something wrong. Thanks a million.
If you're convinced that it should work, try it. It WILL print out text, but then when you do it a second time, it does nothing.

The below example is self explanatory
DEMO http://jsfiddle.net/YzqML/
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
Another example with checkbox and label
DEMO http://jsfiddle.net/YzqML/1/
<script>
function myFunction() {
var div = document.getElementById('myItems'),
clone = div.cloneNode(true);
document.body.appendChild(clone);
}
</script>
<div id="myItems">
<label>My Label</label>
<input type="checkbox" />
</div>
<p id="demo">Click the button to clone the above items</p>
<button onclick="myFunction()">Try it</button>

You can create new elements and append them to the DOM, like this:
function display(msg) {
var p = document.createElement('p');
p.innerHTML = String(msg);
document.body.appendChild(p);
}
Each time you call the display function, the string you give it is added to a new paragraph (p element) on the page, which is added to the bottom of the body.

I note a jquery tag in your question , so you can do this :
<input type="button" value="Duplicate Text" onclick="$('<p />').appendTo('body')"/>
DEMO :
http://jsfiddle.net/abdennour/GZu38/1/

Copy paste this code in an html file and run in a browser. If you could include Jquery, then more simpler the code would be.
<html>
<head>
<script>
function myFunction() {
var h = document.createElement("p");
var t = document.createTextNode("Hello World");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
</head>
<body>
<p id="demo">Click the button to make more text within a "p" tag.</p>
<button onclick="myFunction()">Try it</button>
</body>
</html>

Changing a paragraph via a text field using javascript

I want to type in text in a text field, press a button, and the text of a paragraph will change. What would I need to do for this to happen and is there an easier way to do it other than javascript?
Since I didn't know what I needed to do, here's the code I originally had:
<html>
<head>
<title>Moving Text</title>
<link rel="stylesheet" type="text/css" href="stlye.css">
</head>
<body>
<div id="text">
<p id="new">new text</p>
Main News:<input type="text" name="update"><br>
<input type="button" value="Update" onClick="update();">
<script type="text/javascript">
function update(){
document.getElementById('new').innerHTML = 'Update';
}
</script>
</div>
</body>
I'm pretty sure it's wrong or way off. Any suggestions?

HTML:
<p id="your_paragraph">This text will change, after clicking the button.</p>
Main News: <input type="text" id="theText" />
<input type="button" id="btn" value="Update" />
JavaScript:
var p = document.getElementById('your_paragraph');
var btn = document.getElementById('btn');
var txt = document.getElementById('theText');
btn.onclick = function(){
p.textContent = txt.value;
};
http://jsfiddle.net/3uBKC/

No, you'll need to use javascript. Without an example of your markup nobody will be able to provide you a specific example, but here's a general one using the jQuery library.
// get the textarea, watch for change, paste, and keyup events
$('textarea').on('change paste keyup', function(){
// Store the text field as a variable, get it's value
var thiis = $(this),
value = thiis.val();
// replace the paragraph's content with the textrea's value
$('p').html(value);
});