-2

could someone tell me what is wrong with my code below please? I want 'the_text' to be visible or invisible on the button click. The mystyle.css has:

#the_text {
    visibility: hidden;
}

And my html page:

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>
<body>

<button type="button" onClick = "check_this_out()">Show/hide</button>

<div id="the_text"> I want to hide this by pressing the button above</div>

<script>
function check_this_out() {
var vis_or_hidden = document.getElementById("the_text");

if vis_or_hidden.style["visibility"] = "hidden"

{vis_or_hidden.style["visibility"] = "visible"}

else

{vis_or_hidden.style["visibility"] = "hidden"}
 }
</script>
</body>
</html>
user3481992
  • 33
  • 6
  • 7
    `=` does an assignment, `==` or `===` do a comparison. – j08691 Apr 30 '14 at 21:13
  • 1
    if(vis_or_hidden.style["visibility"] == "hidden") – Mik378 Apr 30 '14 at 21:13
  • 1
    Also, the [`style` property](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) only contains values for inline styles. For values inherited from a stylesheet, you'll have to get the [computed style](https://developer.mozilla.org/en-US/docs/Web/API/window.getComputedStyle). – Jonathan Lonowski Apr 30 '14 at 21:17
  • Thanks for that. But why am I getting 'Uncaught ReferenceError: check_this_out is not defined' when it is defined? And thanks for the down votes, whoever it is. Sorry I'm not a genius like you guys. – user3481992 Apr 30 '14 at 21:17
  • @user3481992 There's a syntax error with the `if` statement in the `function` definition, so it fails to become available to the `onClick`. There are a few validators that can help resolve, such as [JSHint](http://jshint.com/). – Jonathan Lonowski Apr 30 '14 at 21:18
  • thanks for that, looking at jshint now, looks interesting. feel free to post the above in an answer and I'll accept it. – user3481992 Apr 30 '14 at 21:28
  • In fact, == does not work. It should be =. With #the_text { visibility: hidden;} in mystyle.css, and function check_this_out() { var vis_or_hidden = document.getElementById("the_text"); {vis_or_hidden.style["visibility"] = "visible"}} it works correctly, the div becomes visible. It has to do with my if syntax. I'll post with answer when I figure it out. – user3481992 Apr 30 '14 at 21:58

1 Answers1

1

There are a few issues with the function definition.

  • The first is a syntax error as if statements require parenthesis around the condition.

    if (vis_or_hidden.style["visibility"] = "hidden")

  • The next is that the condition is actually assigning (=) rather than comparing (==, ===).

    if (vis_or_hidden.style["visibility"] == "hidden")

    Note: if statements don't require a boolean condition, so you won't get a type error to highlight between them. However, since literals can't be assigned to, reversing the operands can:

    if ("hidden" = vis_or_hidden.style["visibility"])
// ReferenceError: Invalid left-hand side in assignment

    vs.

    if ("hidden" == vis_or_hidden.style["visibility"])

  • The last is a common gotcha with the DOM, as the style property only represents the element's own inline styles, and it doesn't yet have a visibility of its own. To include styles inherited from a stylesheet, you'll have to determine the computed style:

    if (window.getComputedStyle(vis_or_hidden)["visibility"] == "hidden")

    Note, however, that getComputedStyle() isn't supported in IE8 and older. For cross-browser compatibility, you'll have to mix in currentStyle.

    One option for this is Quirks Mode's getStyle(). Another is taking a snippet from jQuery. But, there are many other shims and polyfills available to be found.

Example: http://jsfiddle.net/Ae426/ (Note the No wrap option when using onclick.)

Community
  • 1
  • 1
Jonathan Lonowski
  • 121,453
  • 34
  • 200
  • 199
  • Thanks for the comprehensive answer. No doubt I'll mark it correct when I get my head around it. I'm still on the part about '=' and '==', which is weird, because '=' works for me so far, and '==' does not. – user3481992 Apr 30 '14 at 22:27
  • @user3481992 It still works to an extent because the assignment returns the value being assigned for the `if` to test on. So, the condition becomes `if ("hidden")`. And, since `"hidden"` is a string that isn't empty, it's considered *truthy* (as in, `Boolean("hidden") === true`). But, then the condition will always pass, so the `else` block won't be executed. – Jonathan Lonowski Apr 30 '14 at 22:34
  • Brilliant, your code works great, now I'm going to try understand the differences between =, == and ===. What do you mean 'no wrap' option? I looked at your jsfiddle and couldn't see anything in that regard. – user3481992 Apr 30 '14 at 22:40
  • @user3481992 On the left side in the menu under "Frameworks & Extensions." It's something specific to JSFiddle, but the default choice of `onLoad` can conflict with `on*` attributes like `onclick`. – Jonathan Lonowski Apr 30 '14 at 22:42
  • Ah yes, see what you mean. – user3481992 Apr 30 '14 at 22:51