JavaScript, не работает код

Общее
1

Прошу откорректировать код. Почему не срабатывает?


var popup = document.querySelector(".feedback");
var linkPopup = document.querySelector(".link-connect");
var wrapperPopup = document.querySelector(".wrapper-popup");
var closePopup = document.querySelector(".button-close");
var objectPopup = [popup, wrapperPopup];

var reset = function (evt) {
  evt.preventDefault();
}

var gathering = function (object, class) {
  reset;
  for (var i = 0; i < object.length; i++) {
    if (object[i].classList.contains(class)) {
    object[i].classList.add(class);
  } else {
    object[i].classList.remove(class);
  }
  }
  }

linkPopup.addEventListener("click", gathering(objectPopup, "modal-show"));
closePopup.addEventListener("click",gathering(objectPopup, "modal-show"));
2

Оформите через песочницу все три составляющих: html, css, и js.

3

https://jsfiddle.net/bembolat/1e2Lz5ht/1/

4

Функция reset не работает у вас.
А еще линтер в песочнице подсказывает, что использовать слово class в качестве параметра функции нельзя, так как это название зарезервировано.

5

слово class поменял. По какой причине не работает reset? как правильно интегрировать evt.preventDefault() в мою функцию? на просторах инета не нашел ответ

6

а где смотреть подсказки линтера в песочнице?

7

Подсказки отображаются автоматически при редактировании кода в нижнем левом окне. Ошибки помечаются красной (желтой) точкой в начале строки кода.

8

спасибо. а с функции поможете? -(слово class поменял. По какой причине не работает reset? как правильно интегрировать evt.preventDefault() в мою функцию? на просторах инета не нашел ответ)

9

А не усложнено все как то?

var popup = document.querySelector(".feedback");
var linkPopup = document.querySelector(".link-connect");


var popupOpen = function () {
	popup.classList.add('block');
	wrapperPopup.classList.add('block');
};

var popupClose = function () {
	popup.classList.remove('block');
	wrapperPopup.classList.remove('block');
};

linkPopup.addEventListener('click',popupOpen);
wrapperPopup.addEventListener('click',popupClose);

ps. можно еще так,добавить keydown

linkPopup.addEventListener('click', function (){
	popupOpen();
	document.addEventListener('keydown', function (evt){
	if (evt.keyCode === 27) {
		popupClose();
	}
	});
});
wrapperPopup.addEventListener('click',popupClose);
10

при необходимости добавить большому количеству блоков классы, это функция будет полезной, но нужны чтобы обязательно с параметрами (объект и класс). на скрине видно где инспектор останавливает код, как решить эту проблему?

Screenshot_4
Screenshot_4.png747×239 16.6 KB

11

Я немного не понял для вы отменяйте событие и не понял задачу. У вас preventDefault undefined(неизвестное значение),т.к. ваш дебагер еще не дошел до события где будете preventDefault применять. Поставите код ниже он уже не будет undefined…

Если правильно понял задачу, то вам нужно отменять действие клика?

var popup = document.querySelector(".feedback");
var linkPopup = document.querySelector(".link-connect");

var popupOpen = function () {
	popup.classList.add('block');
	wrapperPopup.classList.add('block');
};

var popupClose = function () {
	popup.classList.remove('block');
	wrapperPopup.classList.remove('block');
};

function reset (evt){
	evt.preventDefault();
}

linkPopup.addEventListener('click', function (evt){
	reset(evt);
	popupOpen();
	document.addEventListener('keydown', function (evt){
	if (evt.keyCode === 27) {
		popupClose();
	}
	});
});
wrapperPopup.addEventListener('click',popupClose);

Мне кажется можно было бы просто удалить атрибут href у ссылки…

12

Попробуйте еще так. Не удалось сделать функцию универсальной, к сожалению.
Но зато получилось исправить явные ошибки.
Reset работает, если передать ее в качестве параметра. В самом цикле была логическая ошибка (если класс есть (contains), то его нужно убрать (remove), иначе add. У вас наоборот.
И еще при использовании addEventListener вторым параметром передается сама функция, а не ее вызов.
Если ошибаюсь, поправьте кто-нибудь.

1 лайк
13

спасибо. может еще найду способ сделать ее универсальной)

14

Вы можете создать отдельную функцию в которую передается то чему нужно менять класс и соответственно класс.

var toggleKlass = function(object, klass) {
for (var i = 0; i < object.length; i++) {
if (object[i].classList.contains(klass)) {
object[i].classList.remove(klass);
} else {
object[i].classList.add(klass);
}
}
};

Cоздаем обработчик, в котором ее просто вызываем с нужными параметрами.
var objectPopup = [popup, wrapperPopup];
var clas = ‘modal-show’;

var gathering = function (evt) {
evt.preventDefault();
toggleKlass(objectPopup, clas);
};

linkPopup.addEventListener(“click”, gathering);

1 лайк