first stab at fretboard player.

need to handle actual chord positions so everything isn't in 4, but
otherwise works?

1 files changed, 6 insertions, 5 deletions

diff --git a/key-picker.mjs b/key-picker.mjs
index b24422d..b3f871c 100644
--- a/key-picker.mjs
+++ b/key-picker.mjs
@@ -17,7 +17,7 @@ function scaleFrom(tonic, scale) {
 
 function handleNoteEnter(e) {
     const elt = e.target;
-    const n = Note.fromString(elt.innerText).toString();
+    const n = Note.fromString(elt.textContent).toString();
     // todo: this should be delegated. the key selector shouldn't know
     // about the fretboard at all.
     elt.classList.add('hover');
@@ -28,7 +28,7 @@ function handleNoteEnter(e) {
 
 function handleNoteLeave(e) {
     const elt = e.target;
-    const n = Note.fromString(elt.innerText).toString();
+    const n = Note.fromString(elt.textContent).toString();
     // ibid.
     elt.classList.remove('hover');
     document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
@@ -37,7 +37,7 @@ function handleNoteLeave(e) {
 }
 
 function noteClicked(elt, justClear=false) {
-    const n = Note.fromString(elt.innerText).toString();
+    const n = Note.fromString(elt.textContent).toString();
     const count = Number(elt.getAttribute('x-data-clicked')) || 0;
     const next = (count + 1) % 4;
     elt.classList.remove(`click${count}`);
@@ -71,7 +71,8 @@ function formChanged(form) {
     const formData = new FormData(form);
     const scale = scaleFrom(formData.get('tonic'), formData.get('scale'));
     ['tonic', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh'].forEach((c, i) => {
-        Array.from(form.getElementsByClassName(c)).forEach(elt => elt.innerText = scale[i]);
+        Array.from(form.getElementsByClassName(c)).forEach(elt =>
+            elt.textContent = scale[i]);
     });
 
     function suffixFromIndex(i) {
@@ -94,7 +95,7 @@ function formChanged(form) {
     Array.from(form.getElementsByClassName('chords')).forEach(list => {
         const items = availableScales.map(s => {
             const elt = document.createElement('li');
-            elt.innerText = s;
+            elt.textContent = s;
             return elt;
         });
         list.replaceChildren();