Simplified demo TypeScript code by using the HTML element hidden attribute instead of CSS display:none.

Author: nayuki

Readme.markdown

@@ -69,7 +69,7 @@ for (int y = 0; y < qr1.size; y++) {
 License
 -------
 
-Copyright © 2024 Project Nayuki. (MIT License)  
+Copyright © 2025 Project Nayuki. (MIT License)  
 [https://www.nayuki.io/page/qr-code-generator-library](https://www.nayuki.io/page/qr-code-generator-library)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of

typescript-javascript/qrcodegen-input-demo.html

@@ -70,7 +70,7 @@ <h1>QR Code generator input demo (JavaScript)</h1>
 			<p>(Are the JavaScript files missing?)</p>
 			<p>(The JavaScript code needs to be compiled from the TypeScript code.)</p>
 		</div>
-		<form id="loaded" style="display:none" onsubmit="event.preventDefault();">
+		<form id="loaded" hidden="hidden" onsubmit="event.preventDefault();">
 			<table>
 				<tbody>
 					<tr>

typescript-javascript/qrcodegen-input-demo.ts

@@ -27,8 +27,8 @@
 namespace app {
 
 	function initialize(): void {
-		getElem("loading").style.display = "none";
-		getElem("loaded").style.removeProperty("display");
+		getElem("loading").hidden = true;
+		getElem("loaded").hidden = false;
 		let elems = document.querySelectorAll("input[type=number], input[type=text], textarea");
 		for (let el of elems) {
 			if (el.id.indexOf("version-") != 0)
@@ -46,19 +46,18 @@ namespace app {
 		const bitmapOutput: boolean = getInput("output-format-bitmap").checked;
 		const scaleRow : HTMLElement = getElem("scale-row");
 		let download = getElem("download") as HTMLAnchorElement;
+		scaleRow.hidden = !bitmapOutput;
 		if (bitmapOutput) {
-			scaleRow.style.removeProperty("display");
 			download.download = "qr-code.png";
 		} else {
-			scaleRow.style.display = "none";
 			download.download = "qr-code.svg";
 		}
 		download.removeAttribute("href");
 
 		// Reset output images in case of early termination
 		const canvas = getElem("qrcode-canvas") as HTMLCanvasElement;
 		const svg = (document.getElementById("qrcode-svg") as Element) as SVGElement;
-		canvas.style.display = "none";
+		canvas.hidden = true;
 		svg.style.display = "none";
 
 		// Returns a QrCode.Ecc object based on the radio buttons in the HTML form.
@@ -94,7 +93,7 @@ namespace app {
 			if (scale <= 0 || scale > 30)
 				return;
 			drawCanvas(qr, scale, border, lightColor, darkColor, canvas);
-			canvas.style.removeProperty("display");
+			canvas.hidden = false;
 			download.href = canvas.toDataURL("image/png");
 		} else {
 			const code: string = toSvgString(qr, border, lightColor, darkColor);