From 2a9b6ef0be04b5b5cacc47922e19c05d190d6ade Mon Sep 17 00:00:00 2001 From: Brian Cully Date: Sat, 26 Jul 2025 14:55:53 -0400 Subject: first stab at fretboard player. need to handle actual chord positions so everything isn't in 4, but otherwise works? --- key-picker.mjs | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'key-picker.mjs') 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(); -- cgit v1.3