Javascript не отображает мой элемент

Question

Я сделал следующий код в jsfiddle, и если я поставлю флажок, div Nime должен быть непрямым и наоборот, но этого не происходит, что я делаю неправильно?

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

Использование the classList API с 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>

То же самое с скрытом состоянии под нагрузкой просто добавить класс .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>

Альтернатива JavaScript

вы можете использовать JQuery, чтобы сделать вашу жизнь проще, но JS рекомендуется

$('[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>

, чтобы скрыть элемент на нагрузке просто добавить класс к нему

$('[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>

или если вы не хотите, чтобы добавить CSS

в 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 2

В вашем JSFiddle, пожалуйста, изменить способ заявить о вашей функции, чтобы сделать его глобальным, или установить JS для Нет Wrap (в голове). (See this question for more info)

window.changing = function() { // }

Другие заметки из вашего первоначального поста: у вас есть два знака равенства, когда вы установите на дисплее блока, который не устанавливает значение. Используйте его. Кроме того, вам нужно вернуть внутри оператора if (или if/else) или он будет всегда запускать остальную часть кода.

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 3

у вас отсутствует возврат в блок if.

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

Answer 4

Содержание после того, как если оператор всегда будет работать, потому что функция не останавливается только потому, что если критерии верно. Кроме того, ваш оператор для установки значения для блока имеет double = 's. Это не должно.

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

Answer 5

Прежде всего, вам необходимо либо выйти из функции изменения(), когда не устанавливая «дисплей = нет» или завернуть «дисплей = блок» в «другое» заявление, или же он будет когда-нибудь установить «дисплей = блок "независимо от предыдущего значения.

На самом деле вы не устанавливаете «display = block» после if(), потому что вместо оператора присваивания («=») вы используете оператор сравнения («==»).

Ваше изменение() функция должна быть:

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

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

или

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

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

Answer 6

Используйте OnChange событие и функцию следующим образом

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

Это просто альтернатива, используя только 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

удалить <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>