0xD34F

.modal.opened {
  display: block;
}

const modal = document.querySelector('.modal');
const close = modal.querySelector('.close');
const toggleModal = state => modal.classList.toggle('opened', state);
const buttonSelector = 'button';

Вариант раз - делаем делегированный обработчик клика, в котором проверяем, где случилось событие. Если кнопка - значит, надо открыть окно. Если корневой элемент окна или .close - наоборот, закрыть:

document.addEventListener('click', ({ target: t }) => {
  if (t === modal || t === close) {
    toggleModal(false);
  } else if (t.matches(buttonSelector)) {
    toggleModal(true);
  }
});

Вариант два - назначаем обработчики непосредственно тем элементам, которые пользователь должен кликать:

[ modal, close ].forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.target === e.currentTarget && toggleModal(false));

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, toggleModal.bind(null, true));

Вместо pageX и pageY используйте clientX и clientY.

Что если пользователь введёт значение, которое нельзя привести к числу? Получите NaN, этот случай у вас никак не обрабатывается.

Результат повторного ввода в переменную count не записывается, если первый раз ввели некорректное значение, то оно там так и останется.

Кроме того, непонятно, почему вы решили, что пользователю хватит всего двух попыток, чтобы ввести корректные данные. Это абсурд. Сделайте цикл, пусть мучается до победного конца:

let count = null;
while (1) {
  count = prompt('Введите количество колонок для таблицы умножения') | 0;
  if (count > 0) {
    break;
  }
  alert('Введите корректное число');
}

lat + x != 11

lon + y != 11

А 10, стало быть, является допустимым значением, да? И это значение вы используете в качестве индекса массива, чей размер - тоже 10. Толково придумано, ничего не скажешь.

const decodeMorse = code => code
  .trim()
  .split('   ')
  .map(n => n.split(' ').map(m => MORSE_CODE[m]).join(''))
  .join(' ');

или

const decodeMorse = code => code
  .trim()
  .replace(/\S+ ?/g, m => MORSE_CODE[m.trim()])
  .replace(/  /g, ' ');

При клике проверяем, у скольких элементов класс уже есть, если максимум достигнут - класс не добавляем:

const itemSelector = '.item';
const activeClass = 'active';
const maxActive = 3;
const onMaxActiveClick = () => alert(`больше ${maxActive} нельзя`);


// делегирование, назначаем обработчик клика один раз для всех элементов
document.addEventListener('click', function(e) {
  const item = e.target.closest(itemSelector);
  if (item) {
    const active = document.querySelectorAll(`${itemSelector}.${activeClass}`);
    if (active.length < maxActive || item.classList.contains(activeClass)) {
      item.classList.toggle(activeClass);
    } else {
      onMaxActiveClick();
    }
  }
});

// или, назначаем обработчик клика каждому элементу индивидуально
let activeCount = 0;

for (const n of document.querySelectorAll(itemSelector)) {
  n.addEventListener('click', onClick);
  activeCount += n.classList.contains(activeClass);
}

function onClick({ currentTarget: item }) {
  if (activeCount < maxActive || item.classList.contains(activeClass)) {
    activeCount += item.classList.toggle(activeClass) ? 1 : -1;
  } else {
    onMaxActiveClick();
  }
}

Кажется, кто-то не в курсе, что индексация массивов начинается с нуля.

Ну нет у вас ни в одном из массивов элемента с индексом 10, нет. Соответственно, когда lon принимает значение 10, map[lon] оказывается undefined, отсюда и ошибка.

Делегируйте обработку событий, и тогда не придётся беспокоиться о пропавших обработчиках. Как-то так.

const getCheckedValues = elements =>
  [...elements].reduce((acc, n) => (
    n.checked && (acc[n.name] = acc[n.name] || []).push(n.value),
    acc
  ), {});

Если пустые группы тоже должны присутствовать, то

const getCheckedValues = elements =>
  Array.prototype.reduce.call(
    elements,
    (acc, { name, value, checked }) => (
      acc[name] = acc[name] || [],
      checked && acc[name].push(value),
      acc
    ),
    {}
  );

const numbers = (string.match(/-?\d+(\.\d+)?/g) || []).map(Number);

// или

const numbers = string.split(' ').map(parseFloat).filter(Number.isFinite);

[Symbol.iterator]() {
  let curr = this.head;

  return {
    next() {
      if (curr) {
        const item = curr;
        curr = curr.next;
        return {
          done: false,
          value: item,
        };
      } else {
        return {
          done: true,
        };
      }
    },
  };
},

Получается, что объявляем две переменных <...> То есть это равносильно

Не получается, не равносильно. Объявляется одна переменная. Вторая - выполняется лишь присваивание. И если - ВНИМАНИЕ - переменной с таким именем нет в текущей области видимости, будет выполнено присваивание переменной из внешней области видимости. Это, как нетрудно понять, отличный источник потенциальных багов (переменная, которую вроде бы никто не трогал, внезапно своё значение изменила). Ну а если такой переменной ни в одной из внешних областей видимости нет, будет создана глобальная переменная.

Короче, подобный код - безграмотный (а в строгом режиме, при отсутствии второй переменной в какой-либо из доступных областей видимости - и вовсе нерабочий, упадёт с ошибкой).

const obj = arr.reduce((max, n) => {
  const val = Object.values(n)[0];
  return val > max[1] ? [ n, val ] : max;
}, [ null, -Infinity ])[0];

Что не так делаю?

Ну, очевидно же - дёргаете сразу все блоки. А надо только тот, по которому кликнули. Для этого его надо как-то запомнить:

let uploadTo = null;

$('.file-upload-preview').click(function() {
  uploadTo = this;
  $('#file-upload').click();
});

Соответственно, внутри обработчика change заменяете $(".file-upload-preview") на $(uploadTo).

Перезаписывайте значение целиком - то есть, при клике на любой элемент надо обойти и все остальные, которые активны, и получить данные из них:

const inputSelector = '.hidden_field';
const itemSelector = '.item';
const activeClass = 'active';


// как это может выглядеть с использованием jquery
const $items = $(itemSelector).click(function() {
  $(this).toggleClass(activeClass);
  $(inputSelector).val($items
    .filter(`.${activeClass}`)
    .get()
    .map(n => $(n).text())
    .join(', ')
  );
});

// или, к чёрту jquery
const items = [...document.querySelectorAll(itemSelector)];
items.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  this.classList.toggle(activeClass);
  document.querySelector(inputSelector).value = items
    .filter(n => n.classList.contains(activeClass))
    .map(n => n.innerText)
    .join(', ');
}

const result = Object.entries(commonObj).map(([ k, v ]) => ({
  objDataName: (objectData.find(n => n.key === k) || {}).name || null,
  packageName: (packageData.find(n => n.id === v.package_id) || {}).title || null,
}));

или

const arrToObj = (arr, key, val) =>
  arr.reduce((acc, n) => (acc[n[key]] = n[val], acc), {});

const objects = arrToObj(objectData, 'key', 'name');
const packages = arrToObj(packageData, 'id', 'title');

const result = Object.entries(commonObj).map(n => ({
  objDataName: objects[n[0]] || null,
  packageName: packages[n[1].package_id] || null,
}));

for (let i = 0; i < 6; i++) {
  const count = res.data.filter(n => +n.categoryid === i).length;
  $(`#category_count_${i}`).html(`(${count})`);
}

Условие, которому должны удовлетворять объекты:

const checkItem = item => item.categoryid === '3';

Считаем:

const count = response.data.filter(checkItem).length;

// или

const count = response.data.reduce((acc, n) => acc + checkItem(n), 0);

// или

let count = 0;
for (const n of response.data) {
  count += checkItem(n);
}

// или

const count = +eval(response.data.map(checkItem).join('+')) || 0;

// или

const count = (function sum(i, n = response.data[i]) {
  return n ? checkItem(n) + sum(i + 1) : 0;
})(0);

document.addEventListener('click', e => {
  const link = e.target.closest('a');
  if (link) {
    e.preventDefault();
    link.style.display = 'none';
    setTimeout(() => window.location = link.href, 2000);
  }
});

Установка свойства checked не приводит к возникновению события change, так что его следует создавать самостоятельно - добавьте .trigger('change') после вызова prop.