We Keep Coding

Expand current Javascript text box content change

At the moment I have a javascript/jquery snippet that changes text in a text box depending on which icon/image is currently hovered over. It currently uses the ID tag name as the display string. How can I get it to display some other text (based on same image hover) - i.e. instead of using the ID string like "idOne" I can use another string like "This is the text to be displayed" for that particular ID element (.attr('id'))
As you can gather I'm pretty new to this! Will appreciate any guidance.
Thanks
jQuery(document).ready(function($) {
var text=$('#explain-text').text();
$('#idOne,#idTwo,#OidThree,#idFour,#idFive').hover(function() {
$('#explain-text').text($(this).attr('id'));
},function(){
$('#explain-text').text(text);
});
});

You can add other attribute in your img tag like this:
<img id="one" src="images.png" alt="Smiley face" info="This is the text to be displayed" >
And then, in your JS file, get its value as below:
$('#explain-text').val($(this).attr("info"));

Convert HTML tags and display as styled text using javascript

I'm looking to design a form that will accept HTML tags and convert them into styled text displayed in a separate text area. Think a very simple JSbin. I thought that this would work:
document.getElementById('tagName').innerHTML='variable'
But this displays the text along with the tags - I just want the tag.
I need some helpful hints or a nudge in the direction I should go. Thanks!

Take a look at https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/ you want to use .textContent to get the text without the tags.
document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent
<div id="html-elements">
<button>hello</button> <strong><em>world</em></strong>
</div>
<div id="text"></div>

I think what you're looking for is contenteditable attr.
You can use that attribute in order to make editable a DOM element like div, span, p, and so on.
For more info go to Making content editable
On the order hand, to be able to write HTML from a textarea and the entered HTML text be rendered into the contenteditable element, you need to bind some kind of event in order to get the wrote HTML and then set it into the target contenteditable element.
var variable = '<b>EleFromStack</b>',
tagName = document.getElementById('tagName'),
textarea = document.getElementById('textarea');
textarea.addEventListener('input', function() {
tagName.innerHTML = this.value;
});
div {
width: 300px;
border: 1px dashed #000
}
<textarea id='textarea'>
</textarea>
<div id='tagName' contenteditable='true'>
</div>

I think what you want to do is create an input then listen to the value changes and display the inner html in another div
<!-- HTML -->
<input type="text" id="input"></input>
<div id="output"></div>
Then listen to the change and update the output
//JS
const input = document.querySelector('#input'),
output = document.querySelector('#output');
button.addEventListener('change', () => {
output.innerHTML = input.value;
})
(JSBIN: https://jsbin.com/genokox/edit?html,js,console,outputjsbin)

The problem is you're trying to write HTML into a text area. The text area is reserved, by the browser engine, to post plain text. Instead of writing out your content to a textarea write it to a DIV or some other content block designed to contain HTML.

Passing images and stylish text to Bootstrap modal

I think my problem is a little complicated . I use Laravel as my framework and have a HTML table that shows the posts list and has some TD (like post_title , post_content ,post_author ,...) . each post_title is an <a> tag that when clicked, a modal is opened and has some text field (to show title, authorName, publishedDate ...) and a textarea (to show the post content) .
My first problem was passing these elements to modal (after Many searches I finally found the solution) and my current problem is that with this way of passing variables I just can show the post content as long as it is just simple text . If the text has some style (bold ,italic ..) I can't pass it to modal . It's because for some quotation marks for tags like <b>ggg</b>...any idea about that?
This is the way I pass elements :
<td class="td4"> <!--the td that shows title and is a link to open modal-->
<!--===================================================modal-->
{{$article->title}}
and my javascript:
$('a.saha').click(function(e){
var essay_id = $(this).attr('id');
var title= $(this).data('title');
var body = $(this).data('body');
$("#article_id").val(essay_id);
$("#onvan").val(title);
tinymce.editors[0].setContent(body);///my textarea
});
when I have just simple text as body, it shows title (the tag) something like this : post1
but when I have styled text or image in my body it shows some thing like :
an article the name <b "id="18" data-toggle="modal"..
any help? thanks a lot

You need to encode the HTML so it doesn't mess with things using the htmlspecialchars function.
So
<a title="{{ htmlspecialchars($article->title) }}">

ok it works finally ... :)
I should just write :
data-body="<?php echo htmlspecialchars($article->body) ;?>"
instesd of :
data-body="<?php echo $article->body; ?>"

replacing text in two different forms, how to reach text in a nested label through its div

I have a setup, where input values get sent to replace the option text in a select list. that's working fine. thing is, i want that same text to also replace the text in a different place in the doc as well- the additional text i want to change is inside a label in a form plugin and i cant put an i.d in the label tag. so my questions is what vanilla javascript do i need to reach the text and replace it with the text from the first input?
the markup thats working ok:
<input class="charInput" id="name1" type="text" onKeyUp="change1(this)" >
...many of these. targeting:
<select id="select1">
<option id="char_name1" value="1">1st</option> ...</select>
(equivalent number of options...)
with
<script>function change1(eet){
document.getElementById("char_" + eet.id).text =
document.getElementById(eet.id).value;}</script>
i would like to replace what in the follow markup:
<div id="frm_field_53_container" class="frm_form_field form-field frm_top_container">
<label class="frm_primary_label" for="field_inputactor1">
TEXT TO REPLACE
<span class="frm_required"></span>
</label></div>
cant add an id to the lable, and the frm_primary_label class is used many times so i cant target the specific text through it (need to go through the div id). any help on the proper markup would be appreciated.

If there is only 1 element under the div, you can just use getElementsByTagName so you could possibly have a code snippet something like this:
var fieldContainer = document.getElementById("frm_field_53_container");
var label = fieldContainer.getElementsByTagName("label");
label[0].innerHTML = document.getElementById(eet.id).value;

I'm not entirely clear on what you want, but I think document.querySelector is what you're looking for:
document.querySelector("#frm_field_53_container label").text = 'new text';
Browser support:
http://caniuse.com/queryselector

append div to text area?

I've got a text area and I'm attempting to append a div to it. I'm trying to do it with Jquery like this...
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').append(text);
The code runs without throwing any errors but my text doesn't appear inside the textarea. Why does this happen?

Do you want to add it to the HTML structure or simply show the HTML Code as text ?
If you want to add it to the textarea HTML structure this will not work.
What you are searching for is
$('#textArea').text(text); or $('#textArea').text($('#textArea').text()+text);
.text() sets text of your textArea
.html() would set your html Content

You can't append to a textarea. Its text content behaves like other input.
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').val( $('#textArea').val() + text);

Try:
$('#textArea').val(text);

If you don't want to render the div's contents but simply want to display the HTML inside the textarea you need to convert the HTML first:
var lt='<';
var gt='>';
var text = '<div class="item"><a class="as">q</a>test</div>';
text = text.replace(/</gi, lt);
text = text.replace(/>/gi, gt);
$('#textArea').append(text);
And the HTML for the text area should look like this:
<textarea id="textArea"></textarea>
If you do want to render the div's contents inside the textarea use:
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').append(text);
The HTML for the text area is the same as in the other example:
<textarea id="textArea"></textarea>

You cannot put div in textarea but sometimes you need to do so. Good news is that you can do it in other way by using contenteditable property of elements. Like
<div contenteditable="true" style="min-height:50px; width:300px;" id="txtDiv">
</div>
This Div will behave exactly like a Textarea but you can append anything you want. And remember when you want to grab data from inside it in jquery
var ContentofDiv = $('#txtDiv').html();