교수님이 샘플로 만드신 코드는 p5 에디터에서는 소리가 나오는데요.

그러면 교수님의 샘플을 봅시다.

<div onClick="playho(2);">ho2</div>

이 HTML을 외국어영역 지문이라고 생각하고 읽어 봅시다.

here begins a division. on click (this) : playho 2. (후략)

모르는 단어는 딱히 없는데 playho 동사의 뜻을 모르겠군요. 교수님의 index.html은 소리를 재생하는 걸 보면 이 동사의 뜻을 아는 모양이죠. 그러면 질문자님의 index.html 웹페이지는 이 동사가 뭔지 알고 있을까요? 질문자님의 github 링크를 열고 브라우저 자바스크립트 콘솔을 연 다음(크롬이라면 F12) 클릭을 해 봅니다.

이런! 시뻘건 오류가 뜨는군요.

Uncaught ReferenceError: playho is not defined
처리되지 않은 참조오류: playho가 뭔지 모르겠음

아니나 다르랴 웹페이지도 모르겠다고 하는군요. 그런데 교수님의 샘플에서는 이런 무서운 오류는 뜨지 않네요. 왜 그럴까요? 아무래도 교수님의 샘플 소스는 playho 동사의 뜻을 아는 거 같습니다. 어디서 몰래 배워온 것일까요? 어디가 됐든 어딘가에서 분명 배워놨겠죠!

모든 소스를 뒤져봅니다. 운좋게도 교수님의 sketch.js 안에서는 playho를 찾을 수 있었습니다.

function playho(number) {
  // 어쩌구 저쩌구...
}

이 자바스크립트가 index.html 안에 포함돼 있었기 때문에 브라우저는 playho 동사("함수")를 기억("할당")해뒀다가 해석("실행"/"렌더링")할 수 있었군요! 그럼 이제 질문자님의 코드가 playho라는 것을 배웠는지 알아볼까요?

질문자님의 sketch.js에서는 playho는 찾을 수 없고 이런 것만이 발견됩니다.

function word(number) {
    // 어쩌구 저쩌구...
}

이런! playho는 배운 적이 없고 word를 배웠었군요. 그렇다면 질문자님의 index.html의 잘못이란 단지 word라고 했어야 하는 것을 playho라고 한 잘못뿐이네요.

이제 뭘 고쳐야 하는지 이해가 되셨을 겁니다. 이해가 되지 않으셨다면, 그냥 단념하시고, 교수님의 샘플을 복사해서 처음부터 다시 시작하시는 편이 빠르다고 하겠습니다. 포기하지 마시고, 상쾌한 정신으로 다시 찬찬히 살펴보세요.