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.

How to Display DIV Contents Based Upon Visibility of Another DIV Contents

I have the following DIV elements shown together on a page:
<div>This Link Shows Up First</div>
<div style="display:none; id:showUpAfterAwesomeButtonIsClicked;">This is the value that should show up after the link above is clicked.</div>
As you can see, the This Link Shows Up First text is displayed initially at page load. I have the following javascript which determines if the user has clicked the This Link Shows Up First text. The goal is to display the This is the value that should show up after the link above is clicked div if the awesome-button is hidden.
custom.valueAwesome = function() {
var awesomeButton = document.getElementById('awesome-button');
awesomeButton.style.visibility = 'hidden';
document.getElementById("showUpAfterAwesomeButtonIsClicked").style.display = '';
gadash.executeCommandQueue();
};
I have tested this script and it is successfully changing the state of the showUpAfterAwesomeButtonIsClicked link to hidden when the user click on the link. This leads me to believe that the connection that needs to be updated has to do with this line:
document.getElementById("showUpAfterAwesomeButtonIsClicked").style.display = '';
I have tried several variations of this line. Is there a better way to achieve this result? Thanks.

You cannot set an id attribute in CSS. It actually needs to be an attribute on the xml tag.
Change
<div style="display:none; id:showUpAfterAwesomeButtonIsClicked;">
to
<div id="showUpAfterAwesomeButtonIsClicked" style="display:none; ">
This will allow your document.getElementById to actually select it.

need to display textarea after clicking label

When I click on a label, just below that some TextArea should be displayed with some predefined text in it and the user shouldn't able to modify the TextArea's content.
This is how I tried :
<html>
<head>
<script type="text/javascript">
function myfunc2() {
document.getElementById('showthis').style.visibility = "visible"
}
</script>
</head>
<body>
<label onclick="myfunc2()">Click here</label>
<textarea id="showthis" style="display:none">dfdsfsfasdfdsfsfasdfssdfsfasf</textarea>
</body>
</html>
iam new to this html and javascript.. pls someone help me on this..

try this..
document.getElementById('showthis').style.display = "block";
document.getElementById('showthis').readOnly=true;
updated
check for classname (hide).. if yes.. show the textarea and name it show ... else hide it and name the classname as hide
JAVASCRIPT
function myfunc2() {
var selectedobj=document.getElementById('showthis');
if(selectedobj.className=='hide'){ //check if classname is hide
selectedobj.style.display = "block";
selectedobj.readOnly=true;
selectedobj.className ='show';
}else{
selectedobj.style.display = "none";
selectedobj.className ='hide';
}
}
add a hide class to your html textarea.
HTML
<textarea id="showthis" style="display:none" class="hide">dfdsfsfasdfdsfsfasdfssdfsfasf</textarea>​ // add a class hide

Although you are setting visibility:visible, the element still has the style property display:none and therefore won't be displayed.
Rather than setting the visibility property, you should override the display property with block.
Change your function to:
function myfunc2() {
document.getElementById('showthis').style.display = "block";
}

You want to change the display property, not the visibility one, so replace your following line:
document.getElementById('showthis').style.visibility="visible"
for this one:
document.getElementById('showthis').style.display="block"
See working demo.

CSS attributes display and visibility are different.
It make more sense to use visibility if you want to simple make the element inivisible but keep the place it occupies in the layout, leaving a blank space:
<textarea id="showthis" style="visibility:hidden">dfdsfsfasdfdsfsfasdfssdfsfasf</textarea>
http://www.w3.org/wiki/CSS/Properties/visibility
On the other hand, using display will hide the element but also remove it from the layout:
function myfunc2() {
document.getElementById('showthis').style.display="block";
}
http://www.w3.org/wiki/CSS/Properties/display

youre missing a
;
on
document.getElementById('showthis').style.visibility="visible"
also you need to change the display.style not the visibility of the element
try this one
document.getElementById('showthis').style.display = "block";
or append a visibility="false" attribute to your textarea

Javascript check div style then if empty then add text to div

Hi Have looked for a couple of solution but am stuggling as JS is not my speciality!
Currently, I have a div that is empty and hidden (produced but a BigCommerce generated page). It's an empty div but has a class and is hidden via "Style display: none".
What I want to try and do is:
Check if the named div has the style of display none.
If above is true then check to see if the div contains nothing (empty string although would need to check as could be some whitespace)
If the above two are true, add some simple text inside the div and change the style to display (or remove the display none.)
The display: none style in the div is inline.
thanks in advance if anyone can help.

Well seeing as you haven't provided any code I'll make some assumptions (you're not using jQuery, the style is inline) but you want something like this...
<div id="myDiv" style="display:none"></div>
<script>
var theDiv = document.getElementById("myDiv");
if(theDiv.style.display == "none" && theDiv.innerHTML.length == 0){
theDiv.innerHTML = "Some sample content";
theDiv.style.display="inline";
}
</script>
In future it's best to add what you already have produced, otherwise you should rephrase your question "can someone please do this for me".

If you are familiar with jQuery. Add div an ID 'myDiv' and use following:
var contents = $('#myDiv').text();
contents =$.trim(contents);
if($('#myDiv').is(":hidden") && contents == ''){
$('#myDiv').html('Here are new contents').show();
}