Javascript doesn't seem to unhide my element

Question

I have made the following code in jsfiddle, and if I check the checkbox, the div Nime should be unhidden and vice versa , but it is not happening, what am I doing wrong?

Code in JSfiddle:
Html:

<label>Newspaper?</label>
        <input type="checkbox" name="nieu" onclick="change()"><br/><br/>
    <div id="nime">
    <label>How?</label>
        <select name="nime"> 
            <option value="email">Email</option>
            <option value="post">Post</option>
            <option value="beide">Both</option>
        </select>
    </div>

Javascript:

function change(){
    which = document.getElementById('nime');

    if(which.style.display=="block"){
        which.style.display="none";
    }else{
        which.style.display="block";
    }

};

Better use a `change` event listener instead of a `click` one. Checkboxes can change in other ways, e.g. with the keyboard. — Oriol, Mar 03 '15 at 18:27
You could also adapt this answer - http://stackoverflow.com/a/2336303/745750 — bwegs, Mar 03 '15 at 18:39

score 2 · Answer 1 · answered Mar 03 '15 at 18:27

2

you are missing return in the if block.

function change(){
    which = document.getElementById('nime');
    if(which.style.display=="block"){
        which.style.display="none";
        return;
    }
    which.style.display="block"
}

answered Mar 03 '15 at 18:27

hammadmirza

156
6

Gildas.Tambo · Accepted Answer · 2015-03-03T19:00:04.593

Use the classList API with the Element.querySelector() API

function change(){
    which.classList.toggle('visibility');// toggle a given class each time we click on the element woth the name nieu
};

var which = document.querySelector('#nime'),// get element with ID=nime
    //which = document.querySelector('[id=nime]'),
    nieu = document.querySelector('[name=nieu]');// get element with name=nime
// add the click event to nieu
nieu.addEventListener("click", change, false)

.visibility{ /*this is our class to hide the element*/
  display: none
}

<label>Newspaper?</label>
        <input type="checkbox" name="nieu"><br/><br/>
    <div id="nime">
    <label>How?</label>
        <select name="nime"> 
            <option value="email">Email</option>
            <option value="post">Post</option>
            <option value="beide">Both</option>
        </select>
    </div>

Same with the hidden state on load just add class .visibility

function change(){
    which.classList.toggle('visibility');
};

var which = document.querySelector('#nime'),
    nieu = document.querySelector('[name=nieu]');

nieu.addEventListener("click", change, false)

.visibility{
  display: none
}

<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id=nime class=visibility>
  <label>How?</label>
  <select name="nime"> 
    <option value="email">Email</option>
    <option value="post">Post</option>
    <option value="beide">Both</option>
  </select>
</div>

Alternative to javascript

you can use jquery to make your life easier but JS is recommended

$('[name=nieu]').click(function(){
    $('#nime').toggleClass("visibility")
})

.visibility{
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime">
  <label>How?</label>
  <select name="nime"> 
    <option value="email">Email</option>
    <option value="post">Post</option>
    <option value="beide">Both</option>
  </select>
</div>

to hide the element on load just add the class to it

$('[name=nieu]').click(function(){
    $('#nime').toggleClass("visibility")
})

.visibility{
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime" class=visibility><!-- add class visibility-->
  <label>How?</label>
  <select name="nime"> 
    <option value="email">Email</option>
    <option value="post">Post</option>
    <option value="beide">Both</option>
  </select>
</div>

or if you don't want to add css

the Jquery methode

$('[name=nieu]').click(function(){
    $('#nime').is(":visible") ? $('#nime').hide(): $('#nime').show()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime" class=visibility><!-- add class visibility-->
  <label>How?</label>
  <select name="nime"> 
    <option value="email">Email</option>
    <option value="post">Post</option>
    <option value="beide">Both</option>
  </select>
</div>

The javascript methode

function change(){
    which.style.display == "none"? which.style.display = "block" : which.style.display = "none"
};

var which = document.querySelector('[id=nime]'),
    nieu = document.querySelector('[name=nieu]');
    
nieu.addEventListener("click", change, false)

<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime">
  <label>How?</label>
  <select name="nime"> 
    <option value="email">Email</option>
    <option value="post">Post</option>
    <option value="beide">Both</option>
  </select>
</div>

I think this starts up with the incorrect state, but otherwise this works. — GregL, Mar 03 '15 at 18:30
Tambo that works for me thank you! But could you explain how this is working exactly? — Genie Kort, Mar 03 '15 at 18:38
By the way, can you discover why it isn't working at this site? I thought that I used exactly the same code. — Genie Kort, Mar 03 '15 at 18:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72165/discussion-between-tambo-and-genie-kort). — Gildas.Tambo, Mar 03 '15 at 19:01
@GenieKort check you console `Uncaught TypeError: Cannot read property 'classList' of null`. you are not using HTML5 `which = document.querySelector('[id=nime]')` with `which = document.getElementById('nime'),` — Gildas.Tambo, Mar 03 '15 at 19:08
Thanks! So what did you exactly added after all? I see very few code now :) — Genie Kort, Mar 03 '15 at 19:27
@GenieKort and you don't need javascript for that just css http://jsfiddle.net/3u8qhft6/1/ good luck — Gildas.Tambo, Mar 03 '15 at 19:36

score 1 · Answer 3 · answered Mar 03 '15 at 18:31

The content after the if statement is always going to run because the function doesn't stop just because the if criteria was true. Also, your statement to set the value to block has the double ='s. It should not.

if(which.style.display=="block"){
    which.style.display="none";
} else {
    which.style.display="block";
}

score 0 · Answer 4 · edited May 23 '17 at 11:56

In your JSFiddle, please change the way you declare your function to make it global, or set the JS to No Wrap ( in head ). (See this question for more info)

window.changing = function() { // }

Other notes from your initial post: you have two equal signs when you set the display to block, which doesn't set the value. Use one. Also, you need a return inside the if statement ( or an if/else ) or it will always run the rest of the code.

window.changing = function() {
    which = document.getElementById('nime');

    if(which.style.display=="block"){
        which.style.display="none";
        return; // otherwise the line below is always shown
    }

    which.style.display = "block"; ///// THIS LINE I EDITED
};

Sorry copied that wrong, but even if I do this it isn't working for me. Updated my code for you! Sorry for that. — Genie Kort, Mar 03 '15 at 18:28

score 0 · Answer 5 · answered Mar 03 '15 at 18:33

First of all, you need to either exit function change() when setting "display=none" or wrap "display=block" in an "else" statement, or else it will ever set "display=block" no matter what was previous value.

Actually, you're currently not setting "display=block" after if() because you're using comparison operator ("==") instead of assignment operator ("=").

Your function change() should be:

function change(){
    which = document.getElementById('nime');

    if(which.style.display=="block") {
        which.style.display="none";
        return;
    }
    which.style.display="block";
};

or

function change(){
    which = document.getElementById('nime');

    if(which.style.display=="block") {
        which.style.display="none";
    }
    else {
        which.style.display="block";
    }
};

Maximo · Answer 6 · 2015-03-03T19:51:43.490

Use the onchange event and the function as follows

function change(){
var which = document.getElementById('nime');
var display = window.getComputedStyle(which, null).getPropertyValue('display');

if(display == 'none') {
    which.style.display = 'block';
    return;
}

if (display == 'block') {
 which.style.display = 'none';
    return;
}

}

HTML

<label>Newspaper?</label>
    <input type="checkbox" name="nieu" onchange="change()"><br/><br/>
<div id="nime">
<label>How?</label>
    <select name="nime"> 
        <option value="email">Email</option>
        <option value="post">Post</option>
        <option value="beide">Both</option>
    </select>
</div>

http://jsfiddle.net/pwx0gs2e/23/

score 0 · Answer 7 · answered Mar 03 '15 at 19:49

This is just an alternative using only css

General sibling selectors

#nime{display: none}
[name=nieu]:checked ~ #nime{display: block}

<label>Newspaper?</label>
<input type="checkbox" name="nieu"><br/><br/>
<div id="nime">
  <label>How?</label>
  <select name="nime"> 
    <option value="email">Email</option>
    <option value="post">Post</option>
    <option value="beide">Both</option>
  </select>
</div>

css adjacent selector

remove <br/><br/>

#nime{display: none;clear: both}
[name=nieu]:checked + #nime{display: block}

<label>Newspaper?</label>
<input type="checkbox" name="nieu">
<div id="nime">
  <label>How?</label>
  <select name="nime"> 
    <option value="email">Email</option>
    <option value="post">Post</option>
    <option value="beide">Both</option>
  </select>
</div>

Javascript doesn't seem to unhide my element

7 Answers7