関数の文字色変更コードでCannot set property 'color' of undefined

前提・実現したいこと

JavaScript初心者です。
JavaScriptで表示される文字の色を黒（初期値）から赤に変えたいのですが、
”Cannot set property 'color' of undefined”
というエラーが出てできません。

調べたところundefinedは初期化されていないという意味だとわかりました。
しかし、colorの初期値は見る限り黒となっています。
初期値が既にあるのに、なぜundefinedとなってしまうのでしょうか。
またこの場合、このエラーをどう回避すればよいでしょうか。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot set property 'color' of undefined
at changeColor (JavaScript.js:5)
at JavaScript.js:8
changeColor @ JavaScript.js:5
(anonymous) @ JavaScript.js:8

該当のソースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>samplePage</title>
</head>
<body>
    <p class="hi">こんにちは。お元気ですか？</p>
    <script src="JavaScript.js">

    </script>
</body>
</html>

JavaScript.js
1var changeColor = function(className, color) {
2    var elem = document.getElementsByClassName(className);
3
4    //文字色変える
5    elem.style.color =  color;
6}
7
8changeColor("hi", "red");

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

回答2件

ベストアンサー

こんにちは。

ひとつのHTMLドキュメント内に同じclassの要素は、ひとつとは限らず、複数存在することができます。
ですので、getElementsByClassName は、指定したクラスに該当する複数の要素の集まり（HTMLCollection) を返します。
これを踏まえると、ご質問に挙げられているコードを修正する方法のひとつとしては、
以下のようにしてみるとよいかと思います。

javascript
1var changeColor = function(className, color) {
2    var elems = document.getElementsByClassName(className);
3
4    //文字色変える
5    elems[0].style.color =  color;
6}
7
8changeColor("hi", "red");

上記では、getElementsByClassName の結果を入れる変数名を、elems と複数形にし、
文字色を変える対象の要素を、 elems[0] と、配列の要素を取得するのと同じ書き方で取得しています。

以下は上記と同じコードを jsFiddle に上げたものです。

https://jsfiddle.net/jun68ykt/xwb5f803/1/

以上参考になれば幸いです。

投稿2018/09/17 14:40

編集2018/09/18 11:32

jun68ykt

総合スコア9058

Tazusa

2018/09/17 14:56 編集

早速のご回答ありがとうございます。コレクションを返していたんですね。 getElementByIdと混同していました。もう一つ質問なのですが、elemsのインデックス番号はどこからきたのでしょうか。自分で変えたい所の一番目だから0かと予測したのですが…

jun68ykt

2018/09/17 15:01

> 自分で変えたい所の一番目だから0かと予測したのですが… はい。その予測で合ってます。２番目ならインデクスは 1 です。以下の例 https://jsfiddle.net/jun68ykt/716nucf4/2/ では、class="hi" に２つの要素が該当し、 1番目の要素 elms[0] の色を red にし、2 番目の要素 elms[1] の色を blue にし、かつ、font-weight を bold にして太字にしています。

Tazusa

2018/09/18 11:08

同じclassでもインデックス指定でいろいろ変えられるのですね。わかりやすい解説ありがとうございました。

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