ПОМОГИТЕ!!!Как работает скрипт?!
 

Прошу помощи.:help:
объясните пожалуйста новичку, как работает этот скрипт:
<script>
var section = document.querySelector('section'); //объявляет переменные и присвоение
var editable = document.querySelector('.editable');
var textareaHTML = document.querySelector('.playable-html'); //
var textareaCSS = document.querySelector('.playable-css');
var reset = document.getElementById('reset'); // объявляет переменную по идентификатору
var htmlCode = textareaHTML.value;
var cssCode = textareaCSS.value;

function fillCode() { //функция заполнения textarea css и html редактирования
editable.innerHTML = textareaCSS.value;
section.innerHTML = textareaHTML.value;
}

reset.addEventListener('click', function () { // добавляет обработчик событий клик мыши и функцию
textareaHTML.value = htmlCode; // значение из текстовой области html = равно htmlcode
textareaCSS.value = cssCode;
fillCode();
});

textareaHTML.addEventListener('input', fillCode); //отслеживает событие в textarea
textareaCSS.addEventListener('input', fillCode);
window.addEventListener('load', fillCode);
</script>

Коментарии добавлял, прошу поправить и дополнить.
Всем добра

Прошу прощения за то что пост и скрипт оформлены не по канонам

Индикатор. Что древний браузер и не отмечает ошибки при вводе? И getElementById, это получение элемента не по индикатору, нет такого свойства у элемента, а по идентификатору. А querySelector, это получение элемента по указанному селектору.

Это вообще трактовка из ряда вон, ибо в textarea нет никакого html, в нем только текст.

А код нужно форматировать, с отступами как и положено.

Спасибо, что указали на недочеты.