vanilla JSはてっきりjsのライブラリかフレームワークだと思っていました。
でも、違いました。
vanilla JSというのは、ライブラリやフレームワークではなく、素でjavascriptを書くということでした。
ということで、javascriptを書いてみました。
jqueryの書き方が頭から離れない悩み
今までjqueryをほとんど使っていたので、
javascriptをなかなか習得できずに現在悪戦苦闘中です。
テキストの書き換えをやろうと思うと、jqueryでは、
$('.say').text('hello');こうなるので、
querySelectorAll('.say').textContent = 'Hello';と書けば効いてくれるだろうと期待しましたが、無反応でした。
そこで、下のように変更したところ無事表示されました。
const element = document.querySelectorAll('.say');
element[0].textContent ='0番目のHello';
element[1].textContent ='1番目のHello';
けれども、もう少しいい書き方があるのではと調べたところ、
foreach文を使えばいいということが分かりました。
javascriptはjqueryより細かく指示しないといけない
というのが私の感想です。
言葉が足りないというか、
もっと細かく指示をしてあげないといけないということですね。
そして直したコードがこちら。
See the Pen javascript querySelectorAll by JandSadaKo (@green555) on CodePen.
forEach文を使わなかった場合はこうする必要がありました。
const element = document.querySelectorAll('.say');
function change(){
element.forEach((e, index) => {
e.textContent =`${index}番目のHello`;
});
}
change();querySelectorAll(‘.say’)だけではどの要素のことか分かってもらえないということですね。
気をつけます。
言葉足らずと指示不足はダメということが分かりました。