alexalexes

btn_send.addEventListener('click',async() => {
    let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
    let formData = new FormData(); // Создаем объект формы для наполнения данными, словно мы работаем с тегом form в html.
    formData.append('canvas_field', blob, 'canvas.png'); // это эквивалент тому, что в нашей html форме создаем поле input type="file" name="canvas_field" value="canvas.png" и прикрепляем туда содержимое blob (метод append сам расшаривает blob, дополнительных преобразований не требуется). Естественно, на DOM-дереве это никак не отразится, это модель формы в памяти JS.
    let response = await fetch('web_tp_word.php', {
    method: 'POST',
    body: formData // для fetch не нужно дополнительных параметров, чтобы объяснить как работать с formData. Идеально, чтобы завернуть файл в форму и отправить на сервер.
    });
});

На стороне сервера:

var_dump($_FILES['canvas_field']); // Сервер при вызове скрипта сложит данные файла во временный файл, а как их получить - в $_FILES. Далее можно обрабатывать всеми теми способами, предназначенные для работы с $_FILES. И после уже неважно, как их сгенерировали на клиенте.

...args
arguments
Это специальные объекты JavaScript. Их заполняет сама среда интерпретарора JS, когда становится активным контекст вызываемой функции. Очень помогает обрабатывать аргументы функции, когда их количество неизвестно заранее, или нужно специально сделать такую функцию, которая обрабатывает произвольное число аргументов.
какая из реализаций лучше?
Если стоит задача написать полифил для поддержки старых версий браузера, то следует использовать объекты JS, которые поддерживаются как можно в ранней версии стандарта языка (смотрите таблицу совместимости браузеров с тем или иным стандартным объектом).
Если такой задачи нет, то берем стильные, модные, молодежные языковые конструкции.

Есть события: click, change, input и т.д.
Привязка обработчика соответствующего события с использованием атрибута тэга осуществляется с приставкой on:

<select id="selectTheme" onchange="alert('Theme changed')">
</select>

Но в тоже время, привязка обработчика события с использованием addEventListener не требует указания on, берется само название события и с названием атрибута не нужно путать:

sel.addEventListener('change', (event) => {
    	alert('Theme changed');
    })

Если наступить на горло веб стандарту, игнорируя условие уникальности, то к id нужно относиться как обычному атрибуту тега. Следовательно, для захвата всех элементов с одинаковым id в коллекцию нужно использовать селектор вида:
input[id="id_imgs"]

В качестве ключа для автоматического входа нужно использовать идентификатор открытой сессии.
Ни в коем случае не хранить пароль.
Нежелательно светить логин и id, по которому авторизовывались.
Идеально, держать подальше идентификатор сессии от JS скрипта, сделать куку только http only и позволить проверять ее только серверу.

<script type="text/javascript">
$( "form" ).submit(function( event ) {
event.preventDefault();
var formData = new FormData(); 
formData.append("f1",  document.querySelector("input[name='f1']").value);
formData.append("f2",  document.querySelector("input[name='f2']").value);
formData.append("f3",  document.querySelector("textarea[name='f3']").value);
var request = new XMLHttpRequest();
request.open('POST', 'http://mydape.ru');
request.onload = function()
{
  window.location.href="https://google.com"; // перенаправляем на гугль.
};
request.send(formData);
});
</script>

Добавляете еще одно скрытое поле с id="field_name_hidden", видимому полю присваиваете id="field_name_showed". Добавляете форме свой обработчик события onsubmit.

<form .... onsubmit="my_submit(e)">
...
<label>Имя</label>
<input id="field_name_showed" type="text"  value=""> <!-- Поле, которое видит пользователь -->
<input id="field_name_hidden" type="hidden"  value=""> <!-- Скрытое поле для отправки -->

function my_submit(e)
{
  e.preventDefault(); // останавливаете выполнение сабмита
  document.getElementById("field_name_hidden").value = document.getElementById("field_name_showed").value + " (добавленный текст)"; // добавляете в скрытое поле формы имя и что хотели еще.
 e.target.submit(); // перезапускаете сабмит формы
}

На стороне сервера перехватываете значение поля field_name_hidden.

Создайте функцию получения времени следующего понедельника

function init_counter_time()
{
var d = new Date();
d.setDate(d.getDate() - (d.getDay() + 6 ) % 7 + 7);
d.setHours(0);
d.setMinutes(d.getTimezoneOffset()); // компенсируем смещение временной зоны у пользователя.
d.setSeconds(0);
d.setMilliseconds(0);
return d.getTime(); // обратите внимание, что время извлекается по таймзоне +0000!!!
}

И используйте при инициализации:

// var countDownDate = new Date('10 October 2020 21:00').getTime();
var countDownDate = init_counter_time();

и при обнулении счетчика:

if (distance < 0) {
       // clearInterval(x);
      countDownDate = init_counter_time();
    }

То что вы пытаетесь написать:
if (question === 1||3)
Значит: "условие ИЛИ какое-то число, эквивалентно true". То есть 3 - это эквивалент true. Ноль будет эквивалентом false. Посмотрите, чему будут эквиваленту отрицательные числа, мне лень смотреть документацию или пробовать консоль.

В вашем случае, решение будет выглядеть так:
if (question === 1|| question === 3)
Если охота использовать перечисление в надежде сократить условие, то это может выглядеть так:
if ([1,3].indexOf(question) > -1)

Вариант с минимальными изменениями

function RST(str){
let arr = str.split('');
let num = 1;
let result = '';
for(let i = 1; i < arr.length; i++){
  if(arr[i] == arr[i-1]){
    num++;
  } else {
    result += arr[i-1] + num; // тут была ошибка
    num = 1;
  }
}
// Нужно допечатать последнее накопление num
if(arr.length > 0)
 result += arr[arr.length-1] + num;
return result;
}

Возьмите элементы с помощью getElementsByClassName и переберите их в цикле, вставив нужные сведения.

var elems = document.getElementsByClassName('your_class');
var elem_count = elems.length;
for(var i = 0; i < elem_count; i++)
{
   elems[i].innerHTML = 'Какие-то данные';
}