public function output_js() {
		?>
		<script>(function(){
			const fields = {
				height: document.getElementById( 'lifterlms_certificate_default_user_defined_height' ),
				width: document.getElementById( 'lifterlms_certificate_default_user_defined_width' ),
				unit: document.getElementById( 'lifterlms_certificate_default_user_defined_unit' ),
			};
			/**
			 * Updates the USER_DEFINED <option> text when the values of the custom inputs change.
			 *
			 * @since 6.0.0
			 *
			 * @return {void}
			 */
			function updateOptionText() {
				const opt = document.getElementById( 'lifterlms_certificate_default_size' ).querySelector( 'option[value="USER_DEFINED"]' ),
					newStr = fields.width.value + fields.unit.value + ' x ' + fields.height.value + fields.unit.value;
				if ( opt ) {
					opt.textContent = opt.textContent.replace( / \(.*\)/, ' (' + newStr + ')' );
				}
			}
			// When any of the fields change, update the value of the option.
			Object.values( fields ).map( function( el ) {
				el.addEventListener( 'change', updateOptionText );
			} );
		})();</script>
		<?php
	}