0xD34F

const LENGTH = чему-то там равно, это вам виднее;
const input = document.querySelector('селектор инпута');
const button = document.querySelector('селектор кнопки');

input.addEventListener('input', e => {
  button.style.display = e.target.value.length >= LENGTH ? '' : 'none';
});

input.dispatchEvent(new Event('input'));

if (typeof defaultBg1 == 'Background') // ???

Это по-другому делается (с известными ограничениями - у null и undefined свойств не бывает, попытка обратиться к конструктору в их случае приведёт к TypeError; кроме того, instanceof проверяет всю цепочку прототипов, т.е., например, [ 1, 2, 3 ] одновременно и instanceof Array, и instanceof Object):

if (defaultBg1 instanceof Background)
// или
if (defaultBg1.constructor === Background)
// или
if (defaultBg1.constructor.name === 'Background')

А вообще, можно соорудить такой костыль:

const type = x => x == null ? `${x}` : x.constructor.name;

type() // 'undefined'
type(null) // 'null'
type(true) // 'Boolean'
type(69) // 'Number'
type('hello, world!!') // 'String'
type(/./) // 'RegExp'
type([ 187 ]) // 'Array'
type({ z: 666 }) // 'Object'
type(document) // 'HTMLDocument'
type(document.querySelectorAll('div')) // 'NodeList'
type(new class XXX {}) // 'XXX'
type(type) // 'Function'

Почитайте про стрелочные функции, например - это поможет вам ответить на свой вопрос самостоятельно.

const reg = /^[А-ЯЁ][а-яё]*(-[А-ЯЁа-яё][а-яё]*)?$/;

// ok
console.log([
  'Анна',
  'Анна-Мария',
  'Анна-мария',
].map(n => reg.test(n)));

// не ok
console.log([
  'анна',
  'аНна',
  'АННА',
  ' Анна',
  'Анна ',
].map(n => reg.test(n)));

const trim = (str, c = '\\s') => str.replace(RegExp(`(^[${c}]+)|([${c}]+$)`, 'g'), '');

const getDateOfNearestDay = (day, date = new Date()) =>
  new Date(
    date.getFullYear(),
    date.getMonth(),
    date.getDate() + ((7 + day - date.getDay()) % 7)
  );


const dateOfNearestSaturday = getDateOfNearestDay(6);

Делаете функцию полного пересчёта суммы, вызываете её при взаимодействиях пользователя с элементами внутри формы (события change, input, обработчик клика по кнопкам изменения количества). Как-то так.

const values = Object.values(arr.reduce((acc, n) => {
  const t = acc[n.from];
  acc[n.from] = (t && t.to > n.to) ? t : n;
  return acc;
}, {})).map(n => n.val);

или (здесь корректные результаты будут только если значения to как вы показали - неотрицательные)

const values = Object.values(arr.reduce((acc, n) => {
  (acc[n.from] = acc[n.from] || [])[n.to] = n.val;
  return acc;
}, {})).map(n => n.pop());

или

const values = [...arr]
  .sort((a, b) => (a.from - b.from) || (a.to - b.to))
  .filter((n, i, a) => !a[i + 1] || a[i + 1].from !== n.from)
  .map(n => n.val);

Можно с помощью lodash.

const values = _
  .chain(arr)
  .groupBy('from')
  .map(n => _.maxBy(n, m => m.to).val)
  .value();

Кто-то не понимает разницы между

а) "не работает" и "результат работы отличается от задуманного".
б) проверкой на равенство и присваиванием.

$(document).on('input', '.price-item', function() {
  const min = +$('.min-price').val() || 0;
  const max = +$('.max-price').val() || Infinity;

  $('.filter')
    .hide()
    .filter(function() {
      const val = parseFloat($('.price', this).text());
      return min <= val && val <= max;
    })
    .show();
});

$('div.award a').each((i, n) => n.onmouseover = n.onmouseout = null)

или

$('div.award a').removeAttr('onmouseover onmouseout')

или

$('div.award a').prop({
  onmouseover: null,
  onmouseout: null,
})

Ничего не надо добавлять, getElementsByClassName возвращает HTMLCollection, а эта штука автоматически обновляется при изменении документа.

$('table td:nth-child(1)').html((i, html) => `<a href="?name=${html}">${html}</a>`);

или

document.querySelectorAll('tbody tr').forEach(n => {
  const td = n.children[0];
  const text = td.textContent;
  td.innerHTML = `<a href="?name=${text}">${text}</a>`;
});

или

for (const { cells: [ n ] } of document.querySelector('tbody').rows) {
  const text = n.innerText;
  n.innerHTML = `<a href="?name=${text}">${text}</a>`;
}

Бегом гуглить, что такое всплытие событий.
И как его останавливать.

const exclude = [ 'class1', 'class2', 'class3' ];

Array
  .from(document.querySelectorAll('div a'))
  .filter(n => !exclude.some(m => n.classList.contains(m)))
  .forEach(n => n.style.display = 'none');

У вас при каждом вызове calendarInit назначаются дополнительные обработчики кликов для prev_month и next_month. То есть, при каждом клике количество обработчиков у вас удваивается. Нажали один раз - к одному существующему добавился ещё один, стало два. Нажали второй раз - каждый из этих двух обработчиков добавил по ещё одному, стало четыре. После третьего клика - стало восемь, после шестого - 64. Как думаете, может это стать причиной торможения?

const $select = $('select').change(function() {
  const selected = $(':selected', this).get().map(n => n.value);
  const disabled = $(':disabled', this).get().map(n => n.value);

  $select
    .not(this)
    .find('option')
    .prop('disabled', function(i, val) {
      return disabled.includes(this.value) ? val : selected.includes(this.value);
    });
});

или

const selects = [...document.querySelectorAll('select')];
selects.forEach(n => n.addEventListener('change', onChange));

function onChange() {
  const options = [...this];
  const selected = options.filter(n => n.selected).map(n => n.value);
  const disabled = options.filter(n => n.disabled).map(n => n.value);

  for (const n of selects.flatMap(m => m === this ? [] : [...m])) {
    n.disabled = disabled.includes(n.value) ? n.disabled : selected.includes(n.value);
  }
}

Родительскому блоку дополнительного содержимого добавьте какой-нибудь класс, чтобы к нему напрямую обращаться можно было, типа class="subs", например.

$('select').change(function() {
  $('.subs [class*="sub"]')
    .addClass('hidden')
    .filter(`.sub${$(this).val()}`)
    .removeClass('hidden');
});

// или

$('select').change(function(e) {
  const index = ($(e.target).prop('selectedIndex') || Infinity) - 1;
  this.addClass('hidden');
  this.eq(index).removeClass('hidden');
}.bind($('.subs').children()));

или

document.querySelector('select').addEventListener('change', e => {
  const cls = `sub${e.target.value}`;
  document.querySelectorAll('.subs [class*="sub"]').forEach(n => {
    n.classList.toggle('hidden', !n.classList.contains(cls));
  });
});

// или

document.querySelector('select').addEventListener('change', e => {
  const index = ~-e.target.selectedIndex;
  Array.prototype.forEach.call(
    document.querySelector('.subs').children,
    (n, i) => n.classList.toggle('hidden', i !== index)
  );
});

О каком input'е идёт речь, и чему должно быть кратно его значение:

const input = document.querySelector('input');
const num = 100;

Можно исправлять вводимые значения:

input.addEventListener('change', function() {
  this.value = (this.value / num | 0) * num;
});

Или не давать вводить неправильные - блокируем ввод в инпут (атрибут readonly), изменение значения осуществляем с помощью кнопок:

<button data-step="-1">-</button>
<button data-step="+1">+</button>

document.querySelectorAll('[data-step]').forEach(function(n) {
  n.addEventListener('click', this);
}, e => input.value = +input.value + e.target.dataset.step * num);

Добавляем pointer-events: none; элементу .bigImage - всё окей, никаких скачков.