取得した4つの要素内の文字列1文字ずつにすべて同じclassを付与したいです。
（最終的にはclassにアニメーションを適用し動きをつけたい）
目指した方法は以下の通りです。
①取得する4つの要素に対して同一のclassを付与し、querySelectorAllで取得
②td内の文字列を1文字ずつspanタグで囲む
③spanタグに対して一定間隔でclassを付与
④新たに付与したclassにCSSでアニメーションを適用（ここはコードを割愛）
動きがつく以前に、文字列（★マーク）が表示すらされない状況です。
下記エラーメッセージが表示されています。
Uncaught TypeError: str is not iterable
at wrapCharSpan
at showStar
-HTML-
<table>
<tr><td>評価1</td><td class='star'>★★★★★</td></tr>
<tr><td>評価２</td><td class='star'>★★★★★</td></tr>
<tr><td>評価3</td><td class='star'>★★★★★</td></tr>
<tr><td>評価4</td><td class='star'>★★★★★</td></tr>
</table>
-JavaScript-
function showStar() {
const wrapCharSpan = function(str) {
return [...str].map(char => `<span>${char}</span>`).join('');
}
const spanText = document.querySelectorAll('.star');
spanText.innerHTML = wrapCharSpan(spanText.textContent)
Array.from(spanText.children).forEach((char, index) =>{
window.setTimeout(function () {
char.classList.add('show');
}, 40 * index);
});
}
以下の方法で実現したい動きは実装できましたが、もっと簡潔にできるのではと感じ、質問させていただきました。
・元々付与しているclassをstar1,star2...と分けて、それぞれquerySelectorで取得し上記の関数式を4つ書く
document.querySelectorAll('.star') が返すのは NodeList （要素のリストを表すオブジェクト）であり、 .innerHTML プロパティは持っていません。 forEach で要素を1つずつ取り出して処理してください。
document.querySelectorAll('.star').forEach(spanText => {
spanText.innerHTML = wrapCharSpan(spanText.textContent)
Array.from(spanText.children).forEach((char, index) => { 略 })
})
@TP78
Questioner