Tweaked {HTML, JavaScript, TypeScript} code to move repetitive event handler registration from HTML to script.

javascript/qrcodegen-demo.js

@@ -24,6 +24,19 @@
 "use strict";
 
 
+function initialize() {
+	var elems = document.querySelectorAll("input[type=number], textarea");
+	for (var i = 0; i < elems.length; i++) {
+		if (elems[i].id.indexOf("version-") != 0)
+			elems[i].oninput = redrawQrCode;
+	}
+	elems = document.querySelectorAll("input[type=radio], input[type=checkbox]");
+	for (var i = 0; i < elems.length; i++)
+		elems[i].onchange = redrawQrCode;
+	redrawQrCode();
+}
+
+
 function redrawQrCode() {
 	// Show/hide rows based on bitmap/vector image output
 	var bitmapOutput = document.getElementById("output-format-bitmap").checked;
@@ -147,4 +160,4 @@ function handleVersionMinMax(which) {
 }
 
 
-redrawQrCode();
+initialize();

javascript/qrcodegen-js-demo.html

@@ -56,7 +56,7 @@
 		<tbody>
 			<tr>
 				<td><strong>Text string:</strong></td>
-				<td style="width:100%"><textarea placeholder="Enter your text to be put into the QR Code" id="text-input" style="width:100%; max-width:30em; height:5em; font-family:inherit" oninput="redrawQrCode();"></textarea></td>
+				<td style="width:100%"><textarea placeholder="Enter your text to be put into the QR Code" id="text-input" style="width:100%; max-width:30em; height:5em; font-family:inherit"></textarea></td>
 			</tr>
 			<tr>
 				<td><strong>QR Code:</strong></td>
@@ -71,26 +71,26 @@
 			<tr>
 				<td><strong>Error correction:</strong></td>
 				<td>
-					<input type="radio" name="errcorlvl" id="errcorlvl-low" onchange="redrawQrCode();" checked="checked"><label for="errcorlvl-low">Low</label>
+					<input type="radio" name="errcorlvl" id="errcorlvl-low" checked="checked"><label for="errcorlvl-low">Low</label>
-					<input type="radio" name="errcorlvl" id="errcorlvl-medium" onchange="redrawQrCode();"><label for="errcorlvl-medium">Medium</label>
+					<input type="radio" name="errcorlvl" id="errcorlvl-medium"><label for="errcorlvl-medium">Medium</label>
-					<input type="radio" name="errcorlvl" id="errcorlvl-quartile" onchange="redrawQrCode();"><label for="errcorlvl-quartile">Quartile</label>
+					<input type="radio" name="errcorlvl" id="errcorlvl-quartile"><label for="errcorlvl-quartile">Quartile</label>
-					<input type="radio" name="errcorlvl" id="errcorlvl-high" onchange="redrawQrCode();"><label for="errcorlvl-high">High</label>
+					<input type="radio" name="errcorlvl" id="errcorlvl-high"><label for="errcorlvl-high">High</label>
 				</td>
 			</tr>
 			<tr>
 				<td>Output format:</td>
 				<td>
-					<input type="radio" name="output-format" id="output-format-bitmap" onchange="redrawQrCode();" checked="checked"><label for="output-format-bitmap">Bitmap</label>
+					<input type="radio" name="output-format" id="output-format-bitmap" checked="checked"><label for="output-format-bitmap">Bitmap</label>
-					<input type="radio" name="output-format" id="output-format-vector" onchange="redrawQrCode();"><label for="output-format-vector">Vector</label>
+					<input type="radio" name="output-format" id="output-format-vector"><label for="output-format-vector">Vector</label>
 				</td>
 			</tr>
 			<tr>
 				<td>Border:</td>
-				<td><input type="number" value="4" min="0" max="100" step="1" id="border-input" style="width:4em" oninput="redrawQrCode();"> modules</td>
+				<td><input type="number" value="4" min="0" max="100" step="1" id="border-input" style="width:4em"> modules</td>
 			</tr>
 			<tr id="scale-row">
 				<td>Scale:</td>
-				<td><input type="number" value="8" min="1" max="30" step="1" id="scale-input" style="width:4em" oninput="redrawQrCode();"> pixels per module</td>
+				<td><input type="number" value="8" min="1" max="30" step="1" id="scale-input" style="width:4em"> pixels per module</td>
 			</tr>
 			<tr>
 				<td>Version range:</td>
@@ -101,11 +101,11 @@
 			</tr>
 			<tr>
 				<td>Mask pattern:</td>
-				<td><input type="number" value="-1" min="-1" max="7" step="1" id="mask-input" style="width:4em" oninput="redrawQrCode();"> (−1 for automatic, 0 to 7 for manual)</td>
+				<td><input type="number" value="-1" min="-1" max="7" step="1" id="mask-input" style="width:4em"> (−1 for automatic, 0 to 7 for manual)</td>
 			</tr>
 			<tr>
 				<td>Boost ECC:</td>
-				<td><input type="checkbox" checked="checked" id="boost-ecc-input" onchange="redrawQrCode();"><label for="boost-ecc-input">Increase <abbr title="error-correcting code">ECC</abbr> level within same version</label></td>
+				<td><input type="checkbox" checked="checked" id="boost-ecc-input"><label for="boost-ecc-input">Increase <abbr title="error-correcting code">ECC</abbr> level within same version</label></td>
 			</tr>
 			<tr>
 				<td>Statistics:</td>

typescript/qrcodegen-demo.ts

@@ -28,6 +28,19 @@
 	const myWindow = window as any;
 	
 	
+	function initialize(): void {
+		let elems = document.querySelectorAll("input[type=number], textarea");
+		for (let el of elems) {
+			if (!el.id.startsWith("version-"))
+				(el as any).oninput = myWindow.redrawQrCode;
+		}
+		elems = document.querySelectorAll("input[type=radio], input[type=checkbox]");
+		for (let el of elems)
+			(el as HTMLInputElement).onchange = myWindow.redrawQrCode;
+		myWindow.redrawQrCode();
+	}
+	
+	
 	/*---- Functions called from HTML code ----*/
 	
 	myWindow.redrawQrCode = function(): void {
@@ -176,5 +189,5 @@
 	
 	/*---- Initialization ----*/
 	
-	myWindow.redrawQrCode();
+	initialize();
 }