скрыть и показать с jQuery, не работающим на кнопке

Question

У меня есть кнопка, когда пользователь нажимает на нее, она предназначена для отображения первой, указанной в моей форме. Я использовал jQuery toggle, но когда кнопка нажата, ничего не происходит, что я делаю неправильно?

$("#chnagecar").click(function() { 
 
    $("#car").toggle(); 
 
});

#changecar{ 
 
    display:none: 
 
}

<p id ="news">Hello User<input type="button" id="changecar" value="Whst car do you have"></p> 
 
<div id="car"> 
 
    <label required>Do you know what car you have? </label> 
 
    <br> 
 
    <br> 
 
    <input type="radio" id="yes" value="yes" />Yes 
 
    <input type="radio" id="no" value="no" />No 
 
    <br> 
 
    <br> 
 
</div>

Answer 1

В дополнение к указанным выше замечаний, я также хотел бы предложить удаления : из свойства дисплея. Как указано в Firefox CSS Syntax Rules, точка с запятой не требуется, но является хорошей практикой.

Answer 2

Есть несколько проблем с кодом:

• <label> не может иметь атрибут required.
• Ваш jQuery содержит опечатку chnagecar > changecar
• Ваш CSS-дисплей: none: есть a: вместо a; в конце.
• Вы пытаетесь включить встроенный стиль HTML вместо CSS.

Хорошо, так что теперь, когда мы

HTML:

<p id="news">Hello User<input id="changecar" type="button" value= 
"What car do you have"></p> 

<div id="car"> 
    <label>Do you know what car you have?</label><br> 
    <br> 
    <input id="yes" type="radio" value="yes">Yes <input id="no" type="radio" 
    value="no">No<br> 
    <br> 
</div> 

CSS:

.hidden { 
    display: none; 
} 

JS:

$("#changecar").click(function() { 
    $("#car").toggleClass('hidden'); 
}); 

Теперь мы имеющий класс hidden, который «скрывает» элемент с дисплеем: none; который переключается при нажатии кнопки.

Работая codepen: http://codepen.io/robertspier/pen/bwkLvQ

Answer 3

Основной корень scaue это у вас есть неправильно написано имя ID Div в 'changeCar' как 'chnageCar'.

$("#changecar").click(function() { 
      $("#car").toggle(); 

     });` 

Выше будет работать.

Кроме того, есть некоторые предложения по улучшению кода;

• В стилях CSS в конце changeCar ​​ID не должно быть двоеточия.

#changecar{ display:none;}

• Устанавливая дисплей: никто не прячут кнопку и она не видна пользователю. Я думаю, что стиль #changecar{ display:none;} здесь не требуется, и вы можете удалить его.
• В метке "required" недействительный атрибут.

Адрес JSFiddle link.