クラスに対応している要素のコンテンツを書き換えたい

Question

Webページ上で円周率を複数表示するページを作っています。

円周率の表示は今のところ

3.14(小数点以下2桁)　
3.141(小数点以下3桁)
の2種類です。

ですが、今後、小数点以下の桁数が増えた円周率をページ上に追加する可能性があるので、
クラス名を指定して桁数をわかりやすいように管理しようと思っています。

そのためJavaScriptでクラスを取得して、
対応している要素のテキストコンテンツを書き換えるコードを作成しました。

要するに、特定のクラス属性を持つ複数の要素のテキストコンテンツを
全て同じ値に書き換えたいのですが、以下のコードでは動作しません。

1番が複数の要素に対応していないのは理解しています。

ですが2番の方はクラス属性(この場合「pi2A」)を全て取得しているので、
テキストコンテンツも取得したものに応じて、
書き換えることが出来ると思っていました。

ですが解釈を間違えているらしくて、動作しません。

自分なりにネットで調べてみたのですが「クラスを取得する」
ということに関連するページはヒットするのですが、

逆のバージョンで1つのクラスに対応している
複数の要素の(テキスト)コンテンツを
書き換えるという事に対して記載されているページを
見つけることが出来ませんでした。

すいませんが、詳しい方、説明の上手な方、
特定のクラス属性に対応している複数の要素のコンテンツを
書き換える方法を教えて下さい。

追記
自分なりにネットで調べて見たのですが、全くヒットしません。

1)「クラスに対応している、複数のコンテンツを書き換える」ことが
「querySelectorAll」では出来ない場合、他の方法でも構わないです。
クラスに対応している複数の要素のコンテンツを書き換える方法を教えて下さい。

2)可能ならjQueryではなくJavaScriptでお願いします。
※jQueryはまだ勉強していないので理解出来ないと思いますので。

3)関連する情報が記載されたWebサイトへのリンクでもOKです

よろしくお願いします。

円周率は < span class = "pi0" > pi0 < /span>とする < br > < br >
	円周率は < span class = "pi2" > pi2 < /span>とする < br > < br >
	円周率は < span class = "pi2" > pi2 < /span>とする < br > < br >
	円周率は < span class = "pi2A" > pi2A < /span>とする < br > < br >
	円周率は < span class = "pi2A" > pi2A < /span>とする < br > < br >
	円周率は < span class = "pi3" > pi4 < /span>とする

<script>
document.querySelector('.pi0').textContent = (Math.PI);
document.querySelector('.pi2').textContent = (Math.PI - (Math.PI - 3.14)); //1
document.querySelectorAll('.pi2A').textContent = (Math.PI - (Math.PI - 3.14)); //2	
document.querySelector('.pi3').textContent = ((Math.PI) - (Math.PI - 3.141));

</script>

---

papinianusさんへのコメントのコードです。
※コメントの方は今、記載しています。
先にコードの方をアップしておきます。

<script>
var thumN=document.querySelectorAll('.thumb');
for(var i=0; i<thumN.length; i++){
thumN[i].onclick=function(){
console.log(this.dataset.image);
};
}
</script>

<style>
ul{list-style-type: none;
padding: 10px;}

li{float: left;
padding: 10px;}
</style>
</head>

<img src="img1.jpg" style="padding: 20px;" id="bigimg">

<ul>
	<li><img src="thumb-img1.jpg" class="thumb" data-image="img1.jpg"></li>
	<li><img src="thumb-img2.jpg" class="thumb" data-image="img2.jpg"></li>
	<li><img src="thumb-img3.jpg" class="thumb" data-image="img3.jpg"></li>
</ul>

ブラウザの画面は画像の通りです。

サムネイルをクリックすればコンソールに
クリックされたサムネイル画像の値ではなく、

ひも付けされている大きい画像の値を取得して
出力します。

Comments

[x_x]

本題とは関係ないかもしれませんが小数点以下3桁で使う場合、小数第4位を四捨五入して3.142になるのではないのでしょうか？

[ZZ-TOP]

回答して頂きありがとうございます。

おっしゃる通りです。
桁数を整えるのに関数を使うのですが、
あると見にくいので、今のところ
とりあえずこれでいいです。

本題の方が完了した後で
関数に置き換える予定です。

Answer 1

querySelectorAllは配列のようなNodeListというものを返すメソッドなので、それぞれの要素を書き換えるにはNodeListの各要素にアクセスする必要があります。

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

【JavaScript:簡単！便利なセレクタ querySelector と querySelectorAll の使い方 | siro:chro】
http://www.sirochro.com/note/js-queryselector-queryselectorall/

Comments

[ZZ-TOP]

回答して頂きありがとうございます。

教えて頂いたページを読み返してみたのですが、
今の私の知識ではよくわかりません。
今回は無理だと思います。

ですがNodeListの使い方だけ
この機会に覚えておきたいと思います。

わかる範囲でいろいろ考えてみたところ、
以下のコードが思いつきました。

```
var classN=document.querySelectorAll('.pi2');
console.log(classN);
```

実行してみたところ、結果はエラーにならず
以下の値になりました。

```
NodeList[span.pi2,span.pi2,]
```

なので、、
```
var classN=document.querySelectorAll('.pi2');
console.log(classN);
document.getElementById('test')=textContent.(～);
```

で、ページ上に出力できると思います。

ですが、NodeListの使い方がわからないので、
document.getElementById('test')=textContent.(～);

の「～」に何を入れれば良いのかわかりません。

今回は希望通りの機能を実現することが出来そうにありませんが、
NodeListの簡単な使い方は理解したいので、
これだけ教えて下さい。

お手数ですが、よろしくお願いします。
※ご面倒でしたらスルーでOKです。

[kei344]

> document.getElementById('test')=textContent.(～);
エラー出るでしょ。

提示したURLの2つ目にサンプルコードがあるのでそれを試してみては？

[ZZ-TOP]

回答して頂きありがとうございます。

順番にいきます。

> document.getElementById('test')=textContent.(～);
エラー出るでしょ。
↓
もちろん、このままではエラーがでます。

var classN=document.querySelectorAll('.pi2');
console.log(classN);
が機能するので、

この結果の値、「NodeList[span.pi2,span.pi2,]」を利用して
「(～)」の部分に何か入力すればページ上に出力できると思い
コメントさせて頂きました。

この値を利用して、
document.getElementById('test')=textContent.();
を利用することが不可なら、こちらの思い違いです。
すいませんがスルーして下さい。

>提示したURLの2つ目にサンプルコードがあるのでそれを試してみては？

http://www.sirochro.com/note/js-queryselector-queryselectorall/

のサンプルですね。両方とも試してみました。

コメントにて再度、アドバイスして頂いたので、
再度、確認してみましたが、このコードの意味がわからないです。

もちろん実行してみましたが、今回の件については
参考になるようなことはわかりませんでした。
※私の知識では。

今回は回答して頂きありがとうございます。
もし、もっと初歩的なことで何かアドバイスがあればうれしいです。

※お手数でしたらスルーでOKです。
※しばらく質問は開けておきます。

[kei344]

> この値を利用して、
> document.getElementById('test')=textContent.();
> を利用することが不可なら、こちらの思い違いです。
get Element By Id はエレメント（要素）をidで取得する、というメソッドです。
textContentはどこからか来て、取得したエレメントを無視して代入しようとしていますね。ちなみに「textContent.()」という構文も見たことはありません。構文には意味があるので、組み替えるにしても法則性があります。
ご自身で質問文に書かれたコードとも違いますよね。

どうも諦められたようなので、このあたりでこちらも諦めます。
Webの情報は「体系立てた情報」で無いことが多いので、本屋で入門書から上級まで何冊か本を買って読むと言う方法が良いと思います。とりあえず最初はわからないことのほうが多いと思いますが、そのうち腑に落ちることも多いはずなのでお勧めします。

[ZZ-TOP]

今回は回答して頂きありがとうございます。

papinianusさんへのコメントに書いたとおり

「document.getElementById('test')=textContent.();」
は以下のタイプミスです。

var classN=document.querySelectorAll('.pi2');
console.log(classN);
document.getElementById('test').textContent = (classN[0]);

タイプミスしたこともあり、今回は混乱してしまいましたが、
こちらの知識不足で
アドバイスして頂いたこととが
ほとんど理解できませんでした。

今の実力が今回やろうとしている機能に対して
差がありすぎるので、いったんあきらめます。

今回は回答して頂きありがとうございます。
自分なりに納得できるところまで調べたので、
一応、自己解決ということで、質問は閉じておきます。

今回は回答して頂きありがとうございます。

Answer 2

[...document.querySelectorAll(".pi2A")].forEach(e=>e.textContent = (Math.PI - (Math.PI - 3.14)));

const nodes = document.querySelectorAll(".pi2A");
for(let i = 0;i < list.length; i++) {
  nodes[i].textContent = (Math.PI - (Math.PI - 3.14)));
}

Comments

[ZZ-TOP]

回答して頂きありがとうございます。

せっかく回答して頂いたのですが、
回答して頂いたコードの意味が理解できないです。

kei344さんとのコメントの通りの知識です
もしもう少し初歩的なことで
コメントして頂ければうれしいです。

※お手数でしたらスルーでOKです。
※しばらく質問はあけておきます。

[papinianus]

質問者様に理解していただけないならいくらでも改めるよういがありますが、前提を。
いまやろうとしているのは複数の要素に対する処理です。なので、それぞれeachに対してfor、みたいな操作が必要です。
ノードリストは配列みたいなものなのですが、forのループで配列を扱うコードにすれば読み解けますか？
あるいは配列が理解しにくいですか？

[ZZ-TOP]

回答して頂きありがとうございます。

順番にいきます。

>いまやろうとしているのは複数の要素に対する処理です。なので、それぞれeachに対してfor、みたいな操作が必要です。
↓
わかりました。

kei344さんのコメントに記載したとおり、
帰ってくるのがNodeListなので、NodeListを扱わなくてはならない
というところまで理解しました。

kei344さんのコメントへの返信がタイプミスなのですが、
以下のコードで

var classN=document.querySelectorAll('.pi2');
console.log(classN);
document.getElementById('output1').textContent = (classN[0]);

とりあえずページ上に
「[object HTMLSpanElement]」と出力されました。

なので、おっしゃるとおり配列型で1個づつ取り出せるらしい、、、。
というところまでわかりました。

kei344さんへのコメントをタイプミスしたので、
お話が混乱しましたが、

papinianusさんのおっしゃるとおり、
「複数のオブジェクトを扱っているらしい、、、」
ということが感覚的に理解できました。

なので、とりあえず
1個だけNodeListを利用してページ上に出力するところまで
理解したい、、、と思い昨夜は区切りました。

----

>ノードリストは配列みたいなものなのですが、forのループで配列を扱うコードにすれば読み解けますか？
あるいは配列が理解しにくいですか？
↓
使っているガイドブックにquerySelectorAllを使った
サンプルのコードがあり、
forのループで配列を扱っていました。

ただし「ナンデモ属性」という属性を使って
※ガイドブック中の言葉です。
ページ上に結果を反映させるコードなので、

forのループの前に、
NodeListを利用してテキストコンテンツに反映させる
方法がわかりません。

例文として参考にしているコードは
今、質問本文に追加しました。

とりあえず、ここまで理解しています。

>質問者様に理解していただけないならいくらでも改めるよういがありますが、前提を。
↓
以上のような感じです。
お手数ですが、よろしくお願いします。

※質問はしばらく開けておきます。

[ZZ-TOP]

今回は回答して頂きありがとうございます。

完全には解決しませんでしたが、
納得いくところまで調べたので、
一応、自己解決ということで、質問を閉じておきます。

今回は回答して頂きありがとうございます。

Answer 3

完全に解決しませんでしたが、
いろいろ調べて今の自分なりに納得するところまでいったので、
自己解決ということで質問を閉じておきます。

自分で調べたのはことは以下の通りです。

テキストコンテンツを書き換えることは出来なかったが
querySelectorAll()を利用して、要素の属性から
テキストコンテンツを全部取得することが出来るようになった。

参考URL

querySelectorAll()の結果はNodeListだけどforEach()が使える仕様です。

【javascript】配列ライクなオブジェクトでforEachどうやるのか調べた話【querySelectorAll】

<script>
const els = document.querySelectorAll('.target');
els.forEach((el) => {
	console.log(el.textContent);
});

</script>

<p class="target">01</p>
<p class="target">02</p>
<p class="target">03</p>
<p class="target">04</p>