А сотворить нужно грубо говоря планировщик интерьера. У него можно оформить:
1. стены: имеют 3 возможных материала панелей, и в зависимости от выбора радиокнопок панелей, меняются картинки с панелями, на которые скрыты (display:none), а при нажатии на кнопочки с цветами (display:block);
2. полы: имеют 2 возможных варианта - линолеум и наливные, у которых так же разный набор цветов и соответствующих картинок.
А потом еще добавится потолок и оборудование.
Учитывая мое первое знакомство с javascript, то я уже голову всю сломала.
Со стенами у меня все заработало, а добавив пол, все перестало работать
Вот.
Можете подскажете, что не так делаю:
<script type="text/javascript">
var btn = document.querySelectorAll('.btn'),
el = document.querySelectorAll('.el');
Array.prototype.forEach.call(btn, function(curr){
curr.addEventListener('click', function(event) {
Array.prototype.forEach.call(el, function(curr){
curr.classList.remove('active');
});
if (document.getElementsByName('gender').checked = true) {
if(document.getElementById('sm').checked) {
document.querySelector('#sm'+this.getAttribute('href').slice(1)).classList.add('active');
}
if ((document.getElementById('sp').checked) || (document.getElementById('spr').checked)) {
document.querySelector('#sp'+this.getAttribute('href').slice(1)).classList.add('active');
}
};
if (document.getElementsByName('gender2').checked = true) {
if (document.getElementById('linol').checked) {
document.querySelector('#p'+this.getAttribute('href').slice(1)).classList.add('active');
}};
return false;
}, false);
});
</script>
Добавились input radio с другим name (gender2) - это выбор пола. Так вот, первая часть со стенами работает, а с полом нет. Знаю, что вы сейчас надо мной будете смеяться
но все, я не могу никак и так и сяк пробовала.
А пример можно посмотреть на этой странице
http://www.laminar.ru/test/