$('.count').on('input', e => $('.game_iframe').width(e.target.value));
document.querySelector('.count').addEventListener('input', function() {
document.querySelector('.game_iframe').style.width = `${this.value}px`;
});
function randomArr(size, min, max) {
const arr = Array.from({ length: max - min + 1 }, (n, i) => i + min);
for (let i = arr.length; --i > 0;) {
const j = Math.random() * (i + 1) | 0;
[ arr[j], arr[i] ] = [ arr[i], arr[j] ];
}
return arr.slice(0, size);
}
const arr = randomArr(4, 1, 9);
const containerSelector = '.dog';
const buttonSelector = 'i.fa-dog';
const counterSelector = '.score_counter';
$(buttonSelector).click(() => {
$(counterSelector).text((i, val) => +val + 1);
});
// или
document.querySelector(buttonSelector).addEventListener('click', () => {
document.querySelector(counterSelector).textContent -= -1;
});
.dog
несколько:$(containerSelector).on('click', buttonSelector, e => {
$(counterSelector, e.delegateTarget).text((i, val) => -~val);
});
// или
document.querySelectorAll(buttonSelector).forEach(function(n) {
n.addEventListener('click', this);
}, ({ currentTarget: t }) => t
.closest(containerSelector)
.querySelector(counterSelector)
.innerText++
);
const $thumbs = $('.thumbs');
$('.show-image').click(function(e) {
e.preventDefault();
$('.images img.active').removeClass('active');
$('.images img').eq(this.dataset.index).addClass('active');
}).attr('data-index', i => i);
$('.next').click(() => $thumbs.append($thumbs.find('.show-image').first()));
$('.prev').click(() => $thumbs.prepend($thumbs.find('.show-image').last()));
<button>toggle disabled</button>
<select>
<option value="">выбрать</option>
<option value="69">hello, world!!</option>
<option value="187">fuck the world</option>
<option value="666">fuck everything</option>
</select>
const $select = $('select');
$('button').click(function() {
$select
.prop('disabled', (i, val) => !val)
.val('')
.find('[value=""]')
.text(() => $select.prop('disabled') ? 'тут ничего нет' : 'выбрать');
});
// или
const select = document.querySelector('select');
document.querySelector('button').addEventListener('click', () => {
select.disabled = !select.disabled;
select.value = '';
select[0].textContent = select.disabled ? 'тут ничего нет' : 'выбрать';
});
const elems = document.querySelectorAll('.hint');
// или
const elems = document.getElementsByClassName('hint');
const getText = el => el.innerText;
// или
const getText = el => el.textContent;
// или
const getText = el => el.firstChild.nodeValue;
const hints = Array.from(elems, getText);
// или
const hints = Array.prototype.map.call(elems, getText);
// или
const hints = [];
for (const n of elems) {
hints.push(getText(n));
}
// или
const hints = [];
for (let i = 0; i < elems.length; i++) {
hints[i] = getText(elems[i]);
}
const filterSelector = '.s-mobile-filter-type-select';
const selectSelector = '.s-mobile-filter-type-select__select';
const selectedSelector = '.s-mobile-filter-type-select__selected-options-list-content';
$(selectSelector).on('change', function() {
$(this)
.closest(filterSelector)
.find(selectedSelector)
.text($('option:selected', this).get().map(n => $(n).text()).join(', '));
});
const updateSelected = select => select
.closest(filterSelector)
.querySelector(selectedSelector)
.textContent = Array
.from(select.selectedOptions, n => n.text)
.join(', ');
// можно назначить обработчик события каждому select'у индивидуально
document.querySelectorAll(selectSelector).forEach(function(n) {
n.addEventListener('change', this);
}, e => updateSelected(e.target));
// или, применяем делегирование
document.addEventListener('change', ({ target: t }) => {
if (t.matches(selectSelector)) {
updateSelected(t);
}
});
const uniqueWithSum = (arr, idKey, sumKey) =>
Object.values(arr.reduce((acc, n) => {
const id = n[idKey];
acc[id] = acc[id] || Object.assign(new n.constructor, n, { [sumKey]: 0 });
acc[id][sumKey] += n[sumKey];
return acc;
}, {}));
// ваш случай
const result = uniqueWithSum(arr, 'id', 'duration');
// элементам не обязательно быть объектами, это могут быть и массивы
uniqueWithSum([
[ 'A', 1 ],
[ 'B', 5 ],
[ 'A', 2 ],
[ 'A', 3 ],
], 0, 1) // [ [ 'A', 6 ], [ 'B', 5 ] ]
const capitalize = str => str.replace(/(^|\s|-)+\S/g, m => m.toUpperCase());
$input.on('input', function() {
this.value = Math.min(MAX_VALUE, Math.max(MIN_VALUE, this.value));
});
const chainScripts = src => src.reduce((acc, n) => {
return acc.then(() => new Promise((resolve, reject) => {
const s = document.createElement('script');
s.onload = resolve;
s.onerror = reject;
s.src = n;
document.head.appendChild(s);
}));
}, Promise.resolve());
const inputs = $('input', str).get();
// или
const inputs = new DOMParser()
.parseFromString(str, 'text/html')
.querySelectorAll('input');
// или
const { elements: inputs } = document
.createRange()
.createContextualFragment(str)
.querySelector('form');
// или
const inputs =
(el => (el.innerHTML = str, el.getElementsByTagName('input')))
(document.createElement('div'));
const getName = el => el.name;
// или
const getName = el => el.getAttribute('name');
// или
const getName = el => el.attributes.name.value;
const names = Array.from(inputs, getName);
// или
const names = Array.prototype.map.call(inputs, getName);
// или
const names = [];
for (const n of inputs) {
names.push(getName(n));
}
// или
const names = [];
for (let i = 0; i < inputs.length; i++) {
names[i] = getName(inputs[i]);
}