Александр

document.querySelector('#test_id').value
или
document.querySelector('#test_id').selectedIndex
или
document.querySelector('#test_id').selectedOptions

input.value.trim().startsWith('value')

fetch('https://test-test.com/sub?channel=system:fb:advc')
  .then(response => {
    if (response.status >= 200 && response.status < 400) {
      return response.json();
    } else {
      return Promise.reject();
    }
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

Во-первых, если подключаете скрипт не перед закрытием body, то поместите его туда.
Во-вторых, document.getElementsByClassName возвращает HTMLCollection - массив, который будет автоматически изменять свое содержимое при изменениях на странице. Поэтому, либо берете из него первый элемент, либо используете document.querySelector.

Также, неплохо было бы проверять элементы, прежде чем добавлять им события; вместо onevent использовать element.addEventListener('event', handler);; вместо == использовать ===; вместо style.backgroundColor использовать style.setProperty('background-color', value);.

case 'SN/PROFILE/ADD_POST': {
  let newPost = {
    id: 1,
    postMessage: action.post.postMessage,
    file: action.post.file,
  }
+ let previousPost = state.posts[state.posts.length - 1] || null;
+ if (previousPost !== null) {
+   newPost.id = previousPost.id + 1;
+ }
  return {
    ...state,
    posts: [...state.posts, newPost],
  }
}

Всё работает.

https://codesandbox.io/s/qna-q963407-lgkp1

Поддержка синтаксиса тут (включите Show obsolete platforms). Babel.

let headerMain = document.getElementById('header__main');
let headerLogo = document.getElementById('header__logo-img');
let headerMenu = document.getElementById('header__menu');

function applySmallHeader() {
    headerMain.style.height = '80px';
    headerLogo.style.height = '140px';
    headerMenu.style.paddingTop = '0px';
}

function applyNormalHeader() {
    headerMain.style.height = '136px';
    headerLogo.style.height = '170px';
    headerMenu.style.paddingTop = '7px';
}

function onPageScroll() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        applySmallHeader();
    } else {
        applyNormalHeader();
    }
}

window.addEventListener('scroll', function () {
    if (window.innerWidth > 992) {
        onPageScroll();
    }
});

window.addEventListener('resize', function () {
    if (window.innerWidth <= 992) {
        applyNormalHeader();
    } else {
        onPageScroll();
    }
});

avatar: {
  '&:hover': {
    '& $changePhoto': {
      display: 'block',
    },
  },
},
changePhoto: {},

function validatePIN(pin) {
  const preparedPin = pin.replace(/\D/g, '');
  
  return preparedPin === pin && (pin.length === 4 || pin.length === 6);
}

https://www.npmjs.com/package/papaparse

Вопрос 1. Вы использовали querySelectorAll, а надо было querySelector.
Вопрос 2. Вы можете заранее получить элемент и добавить на него прослушку события.

let switchItem = document.querySelector('.switch-item');

switchItem.addEventListener('click', event => {
	event.preventDefault();
  switchItem.classList.toggle('on');
});

Вопрос 3. Имеется ввиду одно действие не в том смысле, что это одна инструкция. Имеется ввиду, что если функция должна переключить класс у элемента, то это она и должна делать, а не такое поведение, что она начинает вызывать другие функции, которые приведут к тому, чего разработчик не будет ожидать.

const hours = new Date().getHours(); // Относительно часового пояса клиента
// const hours = new Date().getUTCHours(); // Относительно часового пояса UTC+0
const inInterval = hours >= 15 && hours < 18;

Для Chrome; для Firefox.