fix re-rendering clicked notes when key changed

1 files changed, 22 insertions, 6 deletions

diff --git a/key-picker.mjs b/key-picker.mjs
index 0d3b421..c4fe7ce 100644
--- a/key-picker.mjs
+++ b/key-picker.mjs
@@ -28,22 +28,38 @@ function handleNoteLeave(e) {
     })
 }
 
-function handleNoteClick(e) {
-    const elt = e.target;
+function noteClicked(elt, justClear=false) {
     const n = Note.fromString(elt.innerText).toString();
     const count = Number(elt.getAttribute('x-data-clicked')) || 0;
     const next = (count + 1) % 4;
     elt.classList.remove(`click${count}`);
-    elt.classList.add(`click${next}`);
+    if (!justClear) {
+        elt.classList.add(`click${next}`);
+    }
     // ibid.
     document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
         elt.classList.remove(`click${count}`);
-        elt.classList.add(`click${next}`);
+        if (!justClear) {
+            elt.classList.add(`click${next}`);
+        }
     })
-    elt.setAttribute('x-data-clicked', next.toString());
+    if (justClear) {
+        elt.setAttribute('x-data-clicked', '0');
+    } else {
+        elt.setAttribute('x-data-clicked', next.toString());
+    }
+}
+
+function handleNoteClick(e) {
+    noteClicked(e.target, false);
 }
 
 function formChanged(form) {
+    // clear the selection first, since it relies on state in the dom.
+    form.querySelectorAll('.notes li').forEach(elt => {
+        noteClicked(elt, true);
+    });
+
     const formData = new FormData(form);
     const scale = scaleFrom(formData.get('tonic'), formData.get('scale'));
     ['tonic', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh'].forEach((c, i) => {
@@ -85,6 +101,6 @@ export default function KeyPicker(form) {
         elt.onmouseenter = handleNoteEnter;
         elt.onmouseleave = handleNoteLeave;
         elt.onclick = handleNoteClick;
-    })
+    });
     formChanged(form);
 }