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..
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..
Share Improve this question edited Nov 28, 2012 at 11:04 Manse 38.1k11 gold badges86 silver badges111 bronze badges asked Nov 28, 2012 at 11:02 OteroOtero 291 gold badge2 silver badges8 bronze badges5 Answers
Reset to default 6try 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/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/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