diff options
| -rw-r--r-- | string.mjs | 20 |
1 files changed, 17 insertions, 3 deletions
@@ -82,14 +82,28 @@ export default class extends HTMLElement { fretClicked(e) { console.debug('String#fretClicked', this, e); - console.debug(' -- note', e.target.note); - const [v, o] = ['value', 'octave'].map(attr => e.target.getAttribute(attr)); + if (this.getAttribute('value') === 'x') { + console.log(' -- val', this.getAttribute('value')); + e.preventDefault(); + return; + } + + // not sure why sometimes the input is selected and sometimes + // its parent. + let inp = e.target; + if (!inp.getAttribute('value')) { + // if the parent was clicked outside the input, select the + // input manually. + inp = inp.querySelector('input'); + inp.checked = true; + } + const [v, o] = ['value', 'octave'].map(attr => inp.getAttribute(attr)); // if the open ‘fret’ was clicked, deselect any previously // selected frets because it won't be done automatically, as // the open position isn't in the dom as a radio input. if (v == this.getAttribute('tonic') && o == this.getAttribute('tonic-octave')) { - this.querySelectorAll('input[type="radio"]').forEach(inp => inp.checked = false); + this.querySelectorAll('input[type="radio"]').forEach(i => i.checked = false); } this.setAttribute('value', v); this.setAttribute('octave', o); |