Javascript hide/show div on passed term

Question

Either 'y' or 'n' is passed into my javascript. I need to show a div within my HTML if 'y' is passed, and hide it if 'n'. I currently have this beneath.

<script type="text/javascript">
    if(category = 'y'){
            var x = document.getElementsByClassName("mydiv");
            x.style.display = 'block';
    }else
            x.style.display = 'none';

</script>
<html>
<div class="mydiv">
  <p><h1>Weather</h1></p>
</div>

</html>

The div is always being displayed and the term is being ignored, where am I going wrong? Thanks

Should be 2 `==` (or 3 `===`) in `category = 'y'` for comparison — Asons, May 02 '17 at 19:51
`getElementsByClassName` returns collection. Use `x[0].style.display = 'block';` — Smiranin, May 02 '17 at 19:52
Also missing `{` at the end of `else{` and you haven't close the else condition `}` and your selector will return a group/collection of elements. `x` will only be defined if your condition is true. — NewToJS, May 02 '17 at 19:53
Uncaught TypeError: Cannot set property 'display' of undefined is an error I recieve — bycheetah, May 02 '17 at 19:54
@NewToJS, that's actually fine. If you have only 1 line of code, you do not need to enclose it in brackets. — apires, May 02 '17 at 19:55
@AndrewIce, i know. I was just saying that it's not _really_ necessary. It wouldn't give you an error. — apires, May 02 '17 at 19:57

score 1 · Answer 1 · answered May 02 '17 at 19:52

1

Use "===" when you compare category to 'y'

answered May 02 '17 at 19:52

Marius Todoran

55
6

If that work depends on which data type `category` has – Asons May 02 '17 at 19:53
http://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons – Asons May 02 '17 at 20:17

score 1 · Accepted Answer · edited May 02 '17 at 20:18

1

First of all your if statement should be if(category == 'y') When using only one = sign you are telling the interpreter to assign the value 'y' to variable name category

Second,getElementsByClassName returns a collection of elements so you need to select an element from the resulting collection for example:

var x = document.getElementsByClassName("mydiv")[0];

Notice how I chose the first element from the array. Here is the complete code:

<script type="text/javascript">
    var x = document.getElementsByClassName("mydiv")[0]; // should be outside of the if statement
    if(category == 'y'){
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    } 
</script>

edited May 02 '17 at 20:18

Asons

84,923
12
110
165

answered May 02 '17 at 19:54

udidu

8,269
6
48
68

getElementsByClassName returns collection, not array. Collection hasn't array methods. – Smiranin May 02 '17 at 19:55
Thank you, fixed the answer – udidu May 02 '17 at 19:58
1

thank you @LGSon for the fix, the price of copy+paste failed me on this one :) – udidu May 02 '17 at 21:20

Tymek · Answer 3 · 2017-05-02T19:58:16.270

1

You are doing several things wrong.

use ===, not =. The latter one is for assignment.
add script after an element or wrap it in a function, otherwise it will execute before element exists on the site
getElementsByClassName returns an array, not single element
when you define variable in if statement it will not be available in else block
is category defined somewhere?

<div class="mydiv">
  <p><h1>Weather</h1></p>
</div>
<script type="text/javascript">
    (function() {
      var category = 'n';
      var x = document.getElementsByClassName("mydiv")[0];
      x.style.display = (category === 'y') ? 'block' : 'none';
    })();
</script>

edited May 02 '17 at 19:58

answered May 02 '17 at 19:55

Tymek

3,000
1
25
46

If `===` work depends on which data type `category` has – Asons May 02 '17 at 19:57
Yes, but `0 == ''` for example. Using `===` always is a good habit to have. – Tymek May 02 '17 at 20:00
When using `===` the data type must match or else the comparison fails, using `==` will cast the value before compare – Asons May 02 '17 at 20:01
http://stackoverflow.com/questions/359494/which-equals-operator-vs-should-be-used-in-javascript-comparisons – Asons May 02 '17 at 20:17

score 0 · Answer 4 · answered May 02 '17 at 19:57

You had two issues. First, getElementsByClassName() returns an HTML Collection and instead of passing an index into that collection to correctly refer to the particular element in that collection that you want, you attempted to set the style property on the collection itself.

Next, your if statement uses = instead of ===. The = sets a value, which (in an if statement) will always evaluate to true. You need comparison, so the == or === operators are needed.

Lastly, move your script tag so that it occurs after the HTML that it will use. Querying for an element prior to the element being parsed into memory will result in the element not being found.

var x = document.querySelector(".mydiv");
var category = prompt("Enter 'y' or 'n'");
if(category === 'y'){
  x.style.display = 'block';
} else {
  x.style.display = 'none';
}

<div class="mydiv">
  <h1>Weather</h1>
</div>

score 0 · Answer 5 · answered May 02 '17 at 19:59

You need to correct:

comparison, so use == instead of =
Need to access element by using index, like getElementsByClassName("mydiv")[0]; The reason is that getElementsByClassName returns a collection, notice plural name in the api.
Also, need to take out var x outside of your if/else block. Otherwise else block will not have access to x.

See the sample:

function test() {
        var category = 'n';
        var x = document.getElementsByClassName("mydiv")[0];
        if (category == 'y') {
            
            x.style.display = 'block';
        } else
            x.style.display = 'none';
    }

<button class="btn btn-success" id="buttonCode" type="button" onclick="test()">test</button>
<div class="mydiv">
  <p><h1>Weather</h1></p>
</div>

Javascript hide/show div on passed term

5 Answers5