Why does the Cannot set property 'innerHTML' of null error occur?

Question

JavaScript

I am solving a task for the university on text recognition from pictures. In my code, I use Tesseract.js as the main tool and Browserify in order to run in the browser from the locale.

Error code:
MainScript.js:15 Uncaught TypeError: Cannot set property 'innerHTML' of null
at updateProgress (MainScript.js:15)
at createWorker.js:176
at Worker.worker.onmessage (onMessage.js:3)

Script code:
var Tesseract = require('tesseract.js')

// Image recognition
function recognize(file, lang, logger) {
return Tesseract.recognize(file, lang, {logger})
.then(({ data: {text }}) => {
return text;
})
}

const log = document.getElementById('log');

// Keep track of processing progress
function updateProgress(data) {
log.innerHTML = '';
const statusText = document.createTextNode(data.status);
const progress = document.createElement('progress');
progress.max = 1;
progress.value = data.progress;
log.appendChild(statusText);
log appendChild(progress);
}

// Outputting the result
function setResult(text) {
log.innerHTML = '';
text = text.replace(/\n\s*\n/g, '\n');
const pre = document.createElement('pre');
pre.innerHTML = text;
log.appendChild(pre);
}

document.getElementById('start').addEventListener('click', () => {
const file = document.getElementById('file').files[0];
if (!file) return;

const lang = document.getElementById ('langs').value;

recognize(file, lang, updateProgress)
.then(setResult);
});