SVGで色を変更できません

Question

SVGアニメーションを作ろうとしました。 しかし、赤い頬のボタンをクリックしたときに、SVG要素の色を変更することはできません。 多分、私はJavaScriptのセレクタが間違っていると思います。 QuerySelectorAllメソッドを使用したときにLeftCheekだけが動作することがあったためです。

コンソールにこのエラーメッセージが表示されました。しかし、私はそれを修正する方法を理解することはできません。

main.js:11 Uncaught TypeError: Cannot read property 'add' of undefined(…)changeCharactor @ main.js:11

私のコードはhere（コードペン）です。

私の説明が不明な場合は、コメントしてください。 ありがとう:-)

Answer 1

cheek変数はDOMListに設定されています。これは要素の配列のようなものです。

var cheek = document.getElementsByClassName("cheeks"); 

このように、classListプロパティはありません。代わりに、リストの個々の要素はそのプロパティを持ちます。

cheek[0].classList.add('...whatever');