I was wondering if anyone could figure out why my function won't work properly. What I am trying to achieve is when a button is clicked it displays text and when it is clicked again it hides it and so on.
function hideshow (){
var showhide=document.getElementById('text');
if(showhide.style.display="none")
{
showhide.style.display="block";
}
else{
showhide.style.display="none";
}
}
So far I got it to display my text when I click it once, but once I click it again it has no effect on the text.
I was wondering if anyone could figure out why my function won't work properly. What I am trying to achieve is when a button is clicked it displays text and when it is clicked again it hides it and so on.
function hideshow (){
var showhide=document.getElementById('text');
if(showhide.style.display="none")
{
showhide.style.display="block";
}
else{
showhide.style.display="none";
}
}
So far I got it to display my text when I click it once, but once I click it again it has no effect on the text.
Share edited Jul 11, 2012 at 15:10 BenR 12.3k3 gold badges31 silver badges49 bronze badges asked Jul 10, 2012 at 15:42 user1512677user1512677 432 silver badges4 bronze badges 2-
10
=is an assignment operator... use==if you want to pare. Right now you're hiding it at the start of every click, then showing it again. Always. – TheZ Commented Jul 10, 2012 at 15:44 -
2
Or even better, try to use
===to pare. Learn about it first, though: stackoverflow./questions/3735939/… – jfrej Commented Jul 10, 2012 at 15:56
6 Answers
Reset to default 3I believe that should be:
function hideshow (){
var showhide = document.getElementById('text');
if (showhide.style.display == "none")
{
showhide.style.display = "block";
}
else{
showhide.style.display = "none";
}
}
So, use '==' instead of '=' when paring. The '=' operator assigns a value. In javascript there is also the '===' operator. The difference is that '==' will cast values, while '===' will pare strictly.
For example:
0 == false; // will return true
0 === false; // will not
So you can also use
if (showhide.style.display === "none")
You can read more about the operators here.
you should be using === in your if statment. = is an assignment operator:
function hideshow (){
var showhide=document.getElementById('text');
if(showhide.style.display==="none")
{
showhide.style.display="block";
}
else{
showhide.style.display="none";
}
}
Or:
function hideshow (){
var showhide=document.getElementById('text');
showhide.style.display = showhide.style.display === "none" ?
"block" :
"none";
}
You should be using the parison == operator instead of assigning the value using the = operator.
Try:
function hideshow() {
var showhide = document.getElementById('text').style;
(showhide.display = showhide.display == "none" ? "block" : "none" )
}
You can assign and pare in one statement using:
(showhide.display = showhide.display == "none" ? "block" : "none" )
^assign ^parison
Demo: http://jsfiddle/7Eaf2/
function hideShow() {
el.style.display != "none" ? "none" : "block";
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function hideshow() {
var showhide=document.getElementById('text');
if(showhide.style.visibility=="hidden")
{
showhide.style.visibility="visible";
}
else{
showhide.style.visibility="hidden";
}
}
</script>
</head>
<body>
<div id="text">Text</div>
<button onclick="hideshow()">hideshow</button>
</body>
</html>
I know this is an old post but using jQuery is simple if you don't mind mixing JavaScript and jQuery on the same document.
<script>
$("#eventid").click(function() {
$("#targetid").toggle();
});
</script>
That's it , this will listen for the event id click and toggle the visibility of the target element.