We Keep Coding

jquery javascript how to show some html in the closest div after a textarea

I have 3 textareas and 3 divs under each in which some html should be showed.
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
When i am typing some text, in the div with class character_count below the textarea i am typing in, should the characters be displayed. I do not succeed in it:
This is my js:
tinymce.init({
selector: '.tinymce',
width: 400,
setup: function (ed) {
ed.on('keyup', function (e) {
var count = CountCharacters();
$(this).closest(".character_count").text("Characters: " + count); // find the closest div with class .character_count and show the html
});
}
});
function CountCharacters() {
var body = tinymce.activeEditor.getBody();
var content = tinymce.trim(body.innerText || body.textContent);
return content.length;
};
Fiddle to test: https://jsfiddle.net/4vron96z/3/
BTW: $(".character_count").text("Characters: " + count); does work but then the html is displayed in all the 3 divs...

tinymce.init({
selector: '.tinymce',
width: 400,
setup: function (ed) {
ed.on('keyup', function (e) {
var count = CountCharacters();
$(this.targetElm).closest('.wrapper')
.find('.character_count').text("Characters: " + count);
});
}
});
function CountCharacters() {
var body = tinymce.activeEditor.getBody();
var content = tinymce.trim(body.innerText || body.textContent);
return content.length;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<span class="wrapper">
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
</span>
<span class="wrapper">
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
</span>
<span class="wrapper">
<textarea class="tinymce" rows="2" cols="20"></textarea><br />
<div class="character_count"></div>
</span>
Ok, so StackOverflow doesn't seem to like the tinymce library so I pulled it out of the runnable, but here is the version I got working in your jsfiddle.
Since the this inside your setup callback is some tinymce object, it will not work with jQuery. However, the this.targetElm appears to be the element that the tinymce was initialized for and is processing the event for.
So, using that, we could potentially use $(this.targetElm).next('div') to get your element, BUT, your next element is not the div. It is a <br /> you have in there. Which means you could do next().next('div') to get it, but that is ugly and fragile, SO!
The modified version of your html now has a wrapper around each textarea and div pairing. Changing the markup to be that, we can then use the closest('.wrapper').find('.character_count') logic to navigate up to the parent element of both the textarea and the div, and then find the nested div, no matter where it resides.

TinyMCE has a wordcount plugin that can tell you this without having to calculate the value. For example you could do something like:
tinymce.activeEditor.plugins.wordcount.body.getCharacterCount()
...or...
tinymce.activeEditor.plugins.wordcount.body.getCharacterCountWithoutSpaces()
Here is a running example:
http://fiddle.tinymce.com/Gmhaab

Creating a "Copy button"

Well, as I was searching on the internet for some basic codes to examine - I found this one. A simple code which is supposed to copy the selected text. As i am a complete newbie in JS, I check the meaning of the methods that I didn't understand - and rewrited the code, as i make a few adjustments.
And still the code is not working and If someone can explain - this part ""copyit(this.form.select1)"" - Even though I kind of understand "this" - i am not able to understand what is doind here
function copyit(theField) {
var selectedText = document.getSelection();
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>
This is the original code - and it is not working either
<SCRIPT LANGUAGE="JavaScript">
function copyit(theField) {
var selectedText = document.selection;
if (selectedText.type == 'Text') {
var newRange = selectedText.createRange();
theField.focus();
theField.value = newRange.text;
} else {
alert('select a text in the page and then press this button');
}
}
</script>
And in the body of your web page, add the following where you want the text to appear:
<form name="it">
<div align="center">
<input onclick="copyit(this.form.select1)" type="button" value="Press to copy the highlighted text" name="btnCopy">
<p>
<textarea name="select1" rows="4" cols="45"></textarea>
</div>
</form>

onclick="copyit(this.form.select1)"
executes the copyit() function and passes a variable which is later named theField. The variable that is passed is this.form.select1 which is a textarea with ID select1 which is located in the same form as the input you're clicking hence the this.form.
As to why your code isn't working - you should include here the original code before your adjustments. You probably deleted/changed something you shouldn't have.

I'm not sure what you're asking. Are you asking to, when someone clicks on any button/div, it copies a text you want for his clipboard? If no, ignore my comment, if yes, i'll explain:
First place, where should an user click?
<a class="btn" CopydivFunction(#text)">CLICK ME TO Hello.</a>
Now, add the function with JS.
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Now, place the text you want somebody to copy (hide it):
<h1 id="text" class="hidden">some text. This part won't be seen because of the hidden class, and this is the text that will be copied to your clipboard.</h1>
Place display:none on css:
#text{
display:none;
}
I think you have to add that, so nobody sees it.
And that should be it, click the <a> and you get the text in the h1#text

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)

div content display on a textbox HTML Javascript

I am trying to display the content of one of my div in a textbox ... Can somebody help me out with this? How can I display the content of my div tag in a textbox in HTML?
The following is what I have tried so far:
<script>
var test = document.getElementById("div").innerHtml;
document.getElementById("Key").value = test;
</script>
<div id="div" style="width: 50px" /></div>
<input type="text" id="Key" style="width: 50px" />

Julius, in your code, the text part needs to be a div class and in an external css stylesheet; declare the div class with a border.
Example HTML :
<div class="boxed">
This text is enclosed in a box.
</div>
CSS :
.boxed {
border: 1px solid green ;
}

Another way is to have a div class outside the form code and with css style the div and form
<div id="div">
<form id="form">
<input id="text" type="textbox" />
</form>
</div>
#div {
text-align: center;
}
#text {
width: 200px;
}

Say you have a div:
var myTextBox = $("#myTextBox");
var myText = $(".myDiv").text();
myTextBox.val(myText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myDiv"> blah blah </div>
<input type="text" value="" id="myTextBox" />
Using JQuery, you can do:
var myText = $(".myDiv").text(); // query the DOM for .myDiv selector and get its text
var myTextBox = $("#myTextBox"); // query the DOM and get your textbox
myTextBox.val(myText); // assign value to your textbox
To use jquery, you have to include it at the top of your html page like this:
<script type="text/javascript src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js" ></script>

This will get the content from the div once the page had loaded.
If you have dynamic data: You can put this into a function and have window.onload call that function. If you want the content to update with the dynamic data then you can call the function to update the text box.
window.onload=function(){
//Get the innerHTML of the div tag
var a=document.getElementById('div').innerHTML;
//Place the inner HTML into the text box 'Key'
document.getElementById('Key').value=a;
};
<div id="div" style="width:50px;">Content here...</div>
<input type="text" id="Key"/>
I hope this helps. Happy Coding!

Firstly div is a really bad name for an id - give it something meaningful.
Secondly - do you see the / inside the opening div tag? that means you've just closed the div...
<div id="div" style="width: 50px" />
is the same as
<div id="div" style="width: 50px" /></div> so your code is now
<div id="div" style="width: 50px"></div></div>
and nothing in between the
<div id="div" style="width: 50px" /> and </div> will count as the inner html

click on image and change a text

U have 2 images on a page and a textbox (php)
When u click on the image i want to change the text.
I am a starter, please sent a code that isn't to hard to understand.
<body>
<img src="bier1.jpg" alt="u mad" onclick= "">
<img src="bier2.jpg" alt="u mad" onclick= ""><br>
<form>
<input type="text" name="Example"/>
</form>
</body>

Are I'm right that you want to change the text of the Textbox? If yes here's the code:
<body>
<img src="bier1.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 1'">
<img src="bier2.jpg" alt="u mad" onclick= "document.forms[0].elements['Example'].value = 'Image 2'"><br>
<form>
<input type="text" name="Example"/>
</form>
</body>

You'll need to use Javascript, I prefer to give javascript code using jQuery, so please do a quick Google search on jQuery.
<script type="text/javascript">
$(function(){
//You need to bind click events to your images and probably
$("img.has-message").click(function(){
var msg = $(this).attr("data-msg");
//get the message from that particular image
$("#text_box_id").attr("value",msg);
//changes the value of the text box to display the message
return false;
});
});
</script>
So you place this code in the <head></head> tag of your page
This code will work perfectly assuming you could change your HTML to look like so:
<body>
<img src="bier1.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked">
<img src="bier2.jpg" alt="u mad" class="has-message" data-msg="message to be displayed when the image is clicked"><br>
<form>
<input type="text" id="text_box_id" name="Example"/>
</form>
</body>
Please remember that jQuery needs to have been included on your page for the above to work.

You need to first add id to the text field:
<input type="text" name="Example" id="myTextBox" />
Then you can do such thing:
<img src="bier1.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
<img src="bier2.jpg" alt="u mad" onclick="document.getElementById('myTextBox').value = this.alt;" />
This is not very elegant though, you have it applied to all images without having to change the markup, have such JavaScript:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
document.images[i].onclick = function() {
oTextbox.value = this.alt;
};
}
};
Live test case of above code.
You can also have the above code work only for certain images by applying a class to those images you want "clickable", for example:
<img src="bier1.jpg" alt="u mad" />
<img class="clickable" src="bier2.jpg" alt="u mad 2" />
To have only the second cause the textbox to change, have such code:
window.onload = function() {
var oTextbox = document.getElementById('myTextBox');
for (var i = 0; i < document.images.length; i++) {
var image = document.images[i];
if (image.className === "clickable" || image.className.indexOf("clickable ") >= 0 || image.className.indexOf(" clickable") >= 0) {
image.onclick = function() {
oTextbox.value = this.alt;
};
}
}
};​
Updated fiddle to demonstrate.

I am guessing they mean the page is served as a php page. I would do this purely in javascript. In pseudo code I would do the following.
Create function in javascript
Function looks up input using name
Function sets the text of the input to whatever you like (this could be based on which image was clicked
Id deffinately suggest looking at w3schools website which will give you lots of simple examples to get you started.
Also start basic and work your way up, if you cant get it all working at once, do it bit by bit, get your onclick to alert when you click it, then try setting the text once you knwo your onclicks are working.