alexalexes

Объясните простыми словами новичку в javascript, куда передаются данные через fetch

Данные передаются из браузера (он же клиент) передаются на сервер.

Постоянно вижу разные примеры кода и везде прописывают файл назначения разным

Это не файл, это url - адрес на сервере, от которого любым способом запустится какой-то скрипт, который сможет сформировать ответ для браузера (то есть для клиента).
Если в url указан путь к файлу на сервере, то сервер может отдать статичный файл - но для сервера не принципиально, что отдавать по какому url, можно настроить любые правила взаимодействия.

А ловят данные вообще через какой-то "php://input"

Сервер ловит обращение по url (он же запрос), выясняет по настройкам, что нужно сделать: запустить серверный скрипт, отдать статичный файл или ответить каким-нибудь статусом (например, 404). Если по url запрос попадает на запуск скрипта, то в этом скрипте вы можете обработать параметры запроса. Параметры запроса как правило вылавливают в $_GET или $_POST, либо парсят часть url, либо в дополнение смотрят вложения $_FILES.
Либо в вашем варианте смотрят сырцы запроса через php://input, если что-то нестандартное нужно обработать.

Тогда зачем вообще эти файлы, которые указывают в Fetch? Причем одни с абсолютным адресом, другие с относительным, где-то указывают расширение (html, json и т.д.), где-то вообще без него.

Сервер может отдать разные данные клиенту. Где-то их можно забрать из файла статично, где-то сгенерировать ответ серверным скриптом динамично. А можно на статичные пути генерить динамичные данные, по виду url это мало чего говорит.

Нужно создавать файл какой-то на сервере в который якобы будет передаваться эта информация из JS через POST запрос?

Да, на сервере должен быть скрипт, который сформирует ответ, если для клиента нужно сформировать нечто динамическое, зависящее от параметров запроса.

Я создаю, у меня не выходит ничего, значение, при чтении этого файла или php://input (file_get_contents("php://input")) после передачи POST пустое.

Указываете на клиенте метод POST - на сервере ловите параметры методом POST он будет в $_POST.
Отправляете параметры GET или вшиваете их в url - ловите параметры на сервере в $_GET.
Вкладываете файл на клиенте - получаете атрибуты файлов на сервере в $_FILES.
Все просто.
На клиенте:

fetch('/foranswer.php', { //указываете скрипт на сервере, который сформирует ответ для клиента
                                            method: 'POST',
                                            headers: {
                                                'Content-Type': 'text/plain'
                                            },
                                            body: player.signature
                                        });

На сервере:
Скрипт foranswer.php

<?php
var_dump($_POST); // Посмотрите, а что вообще пришло в пост параметрах.
// Например, вам нужен параметр param1, забираем его значение из поста
$param1 = isset($_POST['param1']) ? $_POST['param1'] : null;
// Если param1 задан - что-то делаем
if(!is_null($param1))
{
  // Например, при наличии параметра param1 нужно прочитать некий ресурс на сервере
  $out = file_get_contents("/file.txt");
  // и отдать его содержимое клиенту
  echo $out;
}
else
{
  // Нет обязательного параметра, отдаем ответ клиенту, что что-то не так.
  echo "Нужен обязательный параметр param1";
}
?>

finalRes у вас типа целого числа в данной ситуации. У него не будет метода indexOf. Нужен финт ушами, чтобы принудительно преобразовать его в строку:
let finalRes = item.number + "";
PS: Ставите ; в строках JS, игнорирование их может сыграть злую шутку.

Зачем создавать отдельную переменную result и присваивать ей obj

Разработчик этой функции перестраховался, присвоив объект obj локальной переменной функции result, потому что знает, что из контекста функции можно изменять obj во внешнем контексте, если изменять свойства объекта внутри функции, и далее по тексту запланирована некая рекурсия. Однако, переприсваивание самого obj не повлияет на внешний контекст, в этом случае можно не создавать отдельную переменную result (если ничего не делать со свойствами объекта).

сразу в блоке условия let result = result[chain[i]]

Ну, мысленно или явно оттрасируйте этот момент:

// не объявили result, считай он такой
// result  = undefined
for (let i = 0; i < chain.length; i++) {
    if (result) { // undefined интерпретируется как false
     let result = result[chain[i]] // сюда вообще не попадаем
    } else {
      result = undefined // сюда попадаем при каждом i, причем result идет во внешний контекст
    }
  }

{cos(угол), sin(угол)} - так получите координаты конечной точки вектора на единичной окружности относительно начала координат. Если нужен другой радиус, то умножьте координаты на радиус. Если нужно добавить смещение вектора, то добавьте к координатам смещение.

Можно не пробегать по DOM дереву, подставляя inline стили элементам. А модифицировать сами CSS правила в итоговом style всей страницы. См. Adding and Removing Rules.

В вашем случае лучший конвертер - компетентный программист.

Вместо click берете более тонкое по срабатыванию событие - mouseup.
Не забудьте, что у сенсорных устройств есть свой аналог этого события - touchend.

let div = document.createElement('div'); // создаем div лишь для того, чтобы положить в него результат функции createContentModal
div.appendChild(createContentModal()); 
overlay.innerHTML = div.innerHTML; // и передать его html содержимое куда надо

Нужно добавить специальную функцию обертку, чтобы изолировать переменные.

item.addEventListener('change', (function(item, i) // функция обертка для функции обработчика, содержит переменные, которые нужно изолировать 
{

return function() { //возврат функции-обработчика для лисенера
     if(item.checked) {
         selectedContactValues.push(parseInt(item.dataset.price));
         countElements[i].value = 1;
     } else {
         selectedContactValues.splice(selectedContactValues.indexOf(item.dataset.price),1);
         countElements[i].value = 0;
     }
        
        resultElement.textContent =  sumArray(selectedContactValues);
    }; // конец функции обработчика событий, переменные которые нужно пропустить через замыкание

})(item, i) // конец функции обертки
);

ПС: Возможно, тут нужно клонировать объект item:

})(JSON.parse(JSON.stringify(item)), i) // конец функции обертки

Данный способ склонирует только структуру и данные объекта без ссылок на функции и ссылок на DOM.
ППС: Или брать arr[i] внутри обертки в качестве item, тогда изолировать придется только i:

item.addEventListener('change', (function(i) // функция обертка для функции обработчика, содержит переменные, которые нужно изолировать 
{

return function() { //возврат функции-обработчика для лисенера
let item = arr[i]; // берем item из внешнего массива arr, но по изолированному индексу i     
if(item.checked) {
         selectedContactValues.push(parseInt(item.dataset.price));
         countElements[i].value = 1;
     } else {
         selectedContactValues.splice(selectedContactValues.indexOf(item.dataset.price),1);
         countElements[i].value = 0;
     }
        
        resultElement.textContent =  sumArray(selectedContactValues);
    }; // конец функции обработчика событий, переменные которые нужно пропустить через замыкание

})(i) // конец функции обертки
);

По идее, самым пробивным способом со времен ie6, чтобы что-то заменить в атрибуте тега было использование setAttribute:
inputs[i].setAttribute('type', 'text');