質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.79%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 394

ZZ-TOP

score 36

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>


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

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

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

イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2019/04/05 11:37

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

    キャンセル

  • ZZ-TOP

    2019/04/05 13:12

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

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

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

    キャンセル

回答 3

+4

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/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/05 02:09

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

    順番にいきます。

    > 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です。
    ※しばらく質問は開けておきます。

    キャンセル

  • 2019/04/05 02:28

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

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

    キャンセル

  • 2019/04/05 22:17

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

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

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

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

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

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

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

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

    キャンセル

+1

[...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)));
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/05 02:26

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

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

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

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

    キャンセル

  • 2019/04/05 09:06

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

    キャンセル

  • 2019/04/05 10:03

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

    順番にいきます。

    >いまやろうとしているのは複数の要素に対する処理です。なので、それぞれ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を利用してテキストコンテンツに反映させる
    方法がわかりません。

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

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

    >質問者様に理解していただけないならいくらでも改めるよういがありますが、前提を。

    以上のような感じです。
    お手数ですが、よろしくお願いします。

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

    キャンセル

  • 2019/04/05 22:19

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

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

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

    キャンセル

check解決した方法

0

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

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

テキストコンテンツを書き換えることは出来なかったが
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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る