Click, Touch 로 연주하기

[ojin0611]

현재 싸피아노는 키보드입력으로 연주가능합니다.

마우스 클릭, 터치로 연주하려면 javascript의 click, touch event들을 활용해 코딩해야합니다.

[SeongjaePark]

@ojin0611 현재 바뀐 main 레포에서 클릭으로 연주 기능이 작동하지 않고, 코드 내에 console.log가 남아있네요

[ojin0611]

@SeongjaePark console.log 일부러 남겨놨었는데 지워주세요!! click은 아래 이슈가 있어서 deactivated 해놨어용.

현재, sound.js에서 let keys = document.querySelectorAll('.key'); 로 keys를 한번 불러옵니다. click을 인식할 때 위에서 생성한 keys를 그대로 이용해 eventListen합니다.

문제는 키보드 재배치시 발생하는데 키보드 배치 변경시 html tag를 동적으로 생성합니다. 그러면 keys가 갖고있던 애들이 아닌 새로운 tag가 생성됩니다.

이 때, click인식을 하고있는 변수 keys는 맨처음 생성된 태그를 가리키고있습니다. keys를 갱신하더라도 keys.forEach(...) 의 keys는 변경되지않은 상태입니다.

당장 해결방법이 떠오르지않음 + 마우스연주 잘 안해서 지워놨는데 해결해주시면 감사하겠숩니다

[SeongjaePark]

@ojin0611 알겠습니다~ 설명 감사해요

[SeongjaePark]

@ojin0611 우선 키보드 재배치 후에도 마우스 클릭으로 연주 가능하도록 코드 수정했습니다