const elems = document.querySelectorAll('div');
function handler() {
alert(123);
elems.forEach(n => n.removeEventListener('click', handler));
}
elems.forEach(n => n.addEventListener('click', handler));
const elems = [...document.querySelectorAll('div')];
document.addEventListener('click', function handler(e) {
if (elems.some(n => n.contains(e.target))) {
alert(123);
document.removeEventListener('click', handler);
}
});
<select id="country"></select>
<select id="сity"></select>
<p></p>
const data = {
'Франция': [ 'Париж', 'Марсель', 'Лион' ],
'США': [ 'Вашингтон', 'Чикаго', 'Фарго' ],
'Италия': [ 'Рим', 'Милан', 'Неаполь' ],
};
const country = document.querySelector('#country');
const city = document.querySelector('#сity');
const p = document.querySelector('p');
country.addEventListener('change', e => {
setSelectOptions(city, data[e.target.value]);
});
city.addEventListener('change', () => {
p.innerText = [ country.value, city.value ].join(', ');
});
setSelectOptions(country, Object.keys(data));
function setSelectOptions(selectEl, optionsData) {
selectEl.innerHTML = optionsData.map(n => `<option>${n}</option>`).join('');
selectEl.dispatchEvent(new Event('change'));
}
::before
(вам же эту косую черту после, а не до выводить нужно, не так ли?), а псевдоэлемент ::after
.about__tag
свойство display: inline-block
и поправить у .about__tag::before
значение свойства top:
(на глаз - поставить 1px или 2px вместо того, что там сейчас). // validation patterns
const fname = /^[a-z ]{5,}$/i;
const sname = /^[a-z ]{5,}$/i;
const email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,6})+$/;
const phone = /^\+7[0-9]{10}$/;
const patterns = {
name: fname,
surname: sname,
email,
phone,
mobilePhone: phone,
workPhone: phone
};
// forms
const forms = [
{ name: 'Ivan Ivanov', email: 'ivan@test.co', phone: '+79212753690' },
{ name: 'III', email: 'ivan@test', phone: '11111' },
{ name: 'Ivan Ivanov', email: 'ivan@test.co', phone: '+79212753690', mobilePhone: '+79212753690'},
{},
{ name: 'Ivan Ivanov', email: 'ivan@test.co', phone: '+79212753690', mobilePhone: 'фывыафывафыв'},
{ name: 'Ivan Ivanov', email: 'ivan@test.co', phone: '+79212753690', mobilePhone: '+79212753690', workPhone: 'asfdadsfd', surname: ''},
{ surname: 'Ivan Ivanov', mobilePhone: 'фывафыва', name: 'Ivan Ivanov', email: 'ivan@test.co', phone: '+79212753690', workPhone: '+79212753690'
}
];
validateAll(forms, patterns);
function validateAll(forms, patterns) {
return forms.map( form => validate(form, patterns) );
}
function validate(form, patterns) {
const keys = Object.keys(form);
const errors = [];
if(!keys.length) return {target: {}, errors: ['empty form is provided']};
keys.forEach(key => {
if( !patterns[key].test(form[key]) ) {
errors.push(`${key} value is invalid`);
}
});
return {
target: JSON.stringify(form),
errors
};
}
hadleKeyFactory = function() {
var result = '';
return function(key) {
return (result += key);
}
}
var handleKey = new hadleKeyFactory();
handleKey('a');
// output 'a'
handleKey('b')
// output 'ab'