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";
    }

};

Answer 1

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"
}

Answer 2

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> 

Answer 3

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";
}

Answer 4

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
};

Answer 5

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";
    }
};

Answer 6

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/

Answer 7

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>