Всем привет Написал "слайдер" для опросника. Есть проблема. в 17 строке идет проверка на отмеченные чексбоксы и заполненные поля возникает проблема в 4 слайде там есть поля (обязательные для заполнения) и чекбокс (не обязателен) вот тут он и не работает
если вместо && поставить || то будет игнорировать чексбоксы. Прошу помощи у вас. Спасибо!
const _form = document.querySelector('.js-questionForm');
const _control = document.querySelectorAll('.js-questionControl');
const _number = document.querySelector('.js-questionNumber');
Array.prototype.forEach.call(_control, el => {
el.addEventListener('click', ev => {
ev.preventDefault();
const _target = ev.target || ev.currentTarget;
const _parent = el.parentNode.parentNode;
const _parentId = _parent.getAttribute('data-id');
const _numberItem = _number.querySelector('span');
const _numberValue = parseInt(_parentId);
if (_target.classList.contains('js-questionNext')) {
const _inputChecked = _parent.querySelector('input:checked');
const _inputText = _parent.querySelector('input[type="text"]');
if (_inputChecked || _inputText) {
if (_parentId !== '4') {
_number.classList.add('active');
_numberItem.innerHTML = `${1+_numberValue}`
} else {
_number.classList.remove('active');
}
if (_inputText) {
console.log(_inputText.vallue)
if (_inputText.vallue = '') {
const _error = _parent.querySelector('.error');
_error.classList.add('active');
setTimeout( () => {
_error.classList.remove('active')
}, 4000)
} else {
let _traX = _parentId;
_form.style.transform = `translateX( -${100*_traX}%)`;
}
}
let _traX = _parentId;
_form.style.transform = `translateX( -${100*_traX}%)`;
} else {
const _error = _parent.querySelector('.error');
_error.classList.add('active');
setTimeout( () => {
_error.classList.remove('active')
}, 4000)
}
} else if (_target.classList.contains('js-questionPrev')) {
if (_parentId !== '2') {
_numberItem.innerHTML = `${_numberValue-1}`
} else {
_number.classList.remove('active');
}
let _traX = _parentId - 2;
_form.style.transform = `translateX( -${100*_traX}%)`;
}
})
});
Пример тут https://jsfiddle.net/DetyaJah/yr8kb7Lu/
Я изменил выбор input для поиска значения в них. Так как код:
const _inputText = _parent.querySelector('input[type="text"]');
Найдет только первый input, а у вас их два.
У меня получилось это вот так, надеюсь это то что вам надо. https://codepen.io/Lukyanenko/pen/gjNLEe?editors=1111
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости