textcontentが使えない

三択問題を作っているところです

そこでまずgetelmentbyclassnameを使って下記のようにテキスト要素だけを取得し、consoleに出力させたいとおもているのですが使うことができません

考えてみたこと
class名のスペルミスがないか
テキストコンテンツが使えないのはバージョンのせいなのか

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="practicejavascript.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="js-question" class="question">
        <div class="container">
        <div class="question-wrapper">
            テキストテキストテキスト
        </div>
        </div>
    </div>

    <script>
        const question="あああああああああああ";
        const choice=[
            "A",
            "B",
            "C"
        ];
        const correct ="B";
　
<//わからないところはここから//>

        const massage = document.getElementsByClassName('question-wrapper').textContent;
        console.log(massage);
     
    


 </script>

     
    <div class="buttom">
        <div class="buttom-wrapper">
            <div class="buttom 1">
                <div class="buttom-container"></div>
            </div>
            <div class="buttom 2">
                <div class="buttom-container">テキストテキストテキスト</div>
            </div>
            <div class="buttom 3">
                <div class="buttom-container">テキストテキストテキスト</div>
            </div>
         </div>   
    </div>**ボールドテキスト**

行動規範の内容に同意します

回答2件

getElementsByClassNameは配列風オブジェクトを返すので、
たとえば1つ目を取得するなら[0].textContentとしましょう。

【Document.getElementsByClassName() - class属性から要素を取得する | DOMリファレンス】
https://lab.syncer.jp/Web/API_Interface/Reference/IDL/Document/getElementsByClassName/

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

Document インターフェイスの getElementsByClassName メソッドは、指定されたクラス名をすべて持つすべての子要素の配列風オブジェクトを返します。

投稿2020/12/15 14:11

kei344

総合スコア69606

sige2232

2020/12/16 13:47

ご回答ありがとうございました！

行動規範の内容に同意します

ベストアンサー

class というのは複数存在する可能性があります。つまり getElementsByClassName() は配列で返ってきます。配列の textContent を見ても存在してないので見れません。ではどうするかと言うと class ではなく id と getElementsById() を使ってみましょう。id は HTML 中に一つしか存在が許されませんので必ずノードが一つ返ってきます。これで textNode を見ることができます。HTML も id に書き換えるまたは追加するのを忘れずに！

投稿2020/12/15 14:12