Fix subtitlesMenu redeclaration in "Adding captions and subtitles to HTML video" tutorial

[jacob-willden]

Description

In the "Building a caption menu" section of the "Adding captions and subtitles to HTML video" tutorial, the subtitlesMenu variable is accidentally declared twice:

let subtitlesMenu;
if (video.textTracks) {
	const df = document.createDocumentFragment();
	const subtitlesMenu = df.appendChild(document.createElement("ul"));
	/* ... */
}

Using this verbatim leads to the following error: Uncaught ReferenceError: can't access lexical declaration 'subtitlesMenu' before initialization. Removing the const for subtitlesMenu turns the statement from an unintended 2nd declaration to the intended initialization of the 1st declaration.

Motivation

Readers who are going through this tutorial would be confused that using the tutorial code is leading to browser errors. This pull request will prevent confusion for future readers.

Additional details

The MDN tutorial is based on code from a tutorial by iandevlin, which uses the ECMAScript 5 syntax of var instead of let and const:

var subtitlesMenu;
if (video.textTracks) {
	var df = document.createDocumentFragment();
	var subtitlesMenu = df.appendChild(document.createElement('ul'));
	/* ... */
}

While using let and const as above means 2 different subtitlesMenu variables are stored, using var means only 1 subtitlesMenu variable is stored and it is assigned df.appendChild(document.createElement('ul')).

Related issues and pull requests

Having done a quick search, it appears there are no related issues or pull requests.

[github-actions]

Preview URLs

• /en-US/docs/Web/Media/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video

(comment last updated: 2024-12-09 10:36:41)

[chrisdavidmills]

Good catch, thanks @jacob-willden!