Move remaining examples to explainer, and modernize and fix errors in examples

Michael Wilson · Michael Wilson · commit 26ec2dcaea4a · 2024-11-27T15:38:11.000-08:00
diff --git a/explainer.md b/explainer.md
@@ -62,21 +62,48 @@ function listInputsAndOutputs( midiAccess ) {
 }
 ```
 
+### Adding inputs and outputs to a <select> box
+
+```js
+// to tell how many entries there are:
+let numberOfMIDIInputs = inputs.size;
+
+// add each of the ports to a <select> box
+for (let input of inputs.values()) {
+  let opt = document.createElement("option");
+  opt.text = input.name;
+  document.getElementById("inputportselector").add(opt);
+}
+
+// to tell how many entries there are:
+let numberOfMIDIOutputs = outputs.size;
+
+// add each of the ports to a <select> box
+for (let output of outputs.values()) {
+  let opt = document.createElement("option");
+  opt.text = output.name;
+  document.getElementById("outputportselector").add(opt);
+}
+```
+
 ### Handling MIDI Input
 This example prints incoming MIDI messages on a single arbitrary input port to
 the console log.
 
 ```js
 function onMIDIMessage( event ) {
   let str = "MIDI message received at timestamp " + event.timeStamp + "[" + event.data.length + " bytes]: ";
-  for (let i=0; i&lt;event.data.length; i++) {
+  for (let i=0; i<event.data.length; i++) {
     str += "0x" + event.data[i].toString(16) + " ";
   }
   console.log( str );
 }
 
-function startLoggingMIDIInput( midiAccess, indexOfPort ) {
-  midiAccess.inputs.forEach( function(entry) {entry.onmidimessage = onMIDIMessage;});
+function startLoggingMIDIInput( midiAccess ) {
+  for (let entry of midiAccess.inputs) {
+    let input = entry[1];
+    input.onmidimessage = onMIDIMessage;
+  }
 }
 ```
 
@@ -169,7 +196,7 @@ function onMIDIInit(midi) {
 
       let haveAtLeastOneDevice=false;
       let inputs=midiAccess.inputs.values();
-      for ( let input = inputs.next(); input &amp;& !input.done; input = inputs.next()) {
+      for ( let input = inputs.next(); input && !input.done; input = inputs.next()) {
         input.value.onmidimessage = MIDIMessageEventHandler;
         haveAtLeastOneDevice = true;
       }
diff --git a/index.html b/index.html
@@ -451,25 +451,9 @@ <h3 id="MIDIInputMap">
           {{MIDIInput}} instance and key is its ID.
         </p>
         <p>
-          This type is used to represent all the currently available MIDI input
-          ports. This enables:
+          This type is used to represent all the currently available [=MIDI input
+          ports=].
         </p>
-        <pre class="example">    // to tell how many entries there are:
-    let numberOfMIDIInputs = inputs.size;
-
-    // add each of the ports to a &lt;select&gt; box
-    inputs.forEach( function( port, key ) {
-      let opt = document.createElement("option");
-      opt.text = port.name;
-      document.getElementById("inputportselector").add(opt);
-    });
-
-    // or you could express in ECMAScript 6 as:
-    for (let input of inputs.values()) {
-      let opt = document.createElement("option");
-      opt.text = input.name;
-      document.getElementById("inputportselector").add(opt);
-    }</pre>
       </section>
       <section data-dfn-for="MIDIOutputMap">
         <h3 id="MIDIOutputMap">
@@ -486,24 +470,8 @@ <h3 id="MIDIOutputMap">
         </p>
         <p>
           This type is used to represent all the currently available [=MIDI
-          output ports=]. This enables:
+          output ports=].
         </p>
-        <pre class="example">    // to tell how many entries there are:
-    let numberOfMIDIOutputs = outputs.size;
-
-    // add each of the ports to a &lt;select&gt; box
-    outputs.forEach( function( port, key ) {
-      let opt = document.createElement("option");
-      opt.text = port.name;
-      document.getElementById("outputportselector").add(opt);
-    });
-
-    // or you could express in ECMAScript 6 as:
-    for (let output of outputs.values()) {
-      let opt = document.createElement("option");
-      opt.text = output.name;
-      document.getElementById("outputportselector").add(opt);
-    }</pre>
       </section>
       <section data-dfn-for="MIDIAccess" data-link-for="MIDIAccess">
         <h2 id="MIDIAccess">
